Issue for importing "@highcharts/highcharts-react-native" - Module parse failed: Unexpected toke

Question

Module parse failed: Unexpected token (34:16)

I face a problem to use highcharts-react-native in react-native.

I followed the instructions in https://github.com/highcharts/highcharts-react-native, but I cannot run my react-native-app in browser.

My actions:

• Created new react-native-app.(https://reactnative.dev/blog/2017/03/13/introducing-create-react-native-app)

• Installed highcharts-react-native in my app.

  npm install @highcharts/highcharts-react-native

• Modified metro.config.js as https://github.com/highcharts/highcharts-react-native#installing

• Modified App.js as https://github.com/highcharts/highcharts-react-native#highcharts-chart

• Started my app

  npm run web

But, http://localhost:19006/ was showed like below

    Uncaught Error: Module parse failed: Unexpected token (34:16)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    |     }
    | 
    >     setHcAssets = async (useCDN) => {
    |         try {
    |             await this.setLayout()
        at Object../node_modules/@highcharts/highcharts-react-native/src/HighchartsReactNative.js (index.js:1)
        at __webpack_require__ (bootstrap:789)
        at fn (bootstrap:100)
        at Object../node_modules/@highcharts/highcharts-react-native/index.js (index.js:1)
        at __webpack_require__ (bootstrap:789)
        at fn (bootstrap:100)
        at Module../App.js (bootstrap:856)
        at __webpack_require__ (bootstrap:789)
        at fn (bootstrap:100)
        at Module../index.js (index.js:1)
        at __webpack_require__ (bootstrap:789)
        at fn (bootstrap:100)
        at Object.1 (tracing.js:7)
        at __webpack_require__ (bootstrap:789)
        at bootstrap:856
        at bootstrap:856

And

    ./node_modules/@highcharts/highcharts-react-native/src/HighchartsReactNative.js 34:16
    Module parse failed: Unexpected token (34:16)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    |     }
    | 
    >     setHcAssets = async (useCDN) => {
    |         try {
    |             await this.setLayout()
    console.<computed> @ index.js:1

Answer 1

It looks like there is a problem with the webpack configuration, take a look at this thread it describes a similar case.

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."

Module parse failed: Unexpected token. react-native/index.js "typeof" operator