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

Sebastian Hajdus · Accepted Answer · 2021-09-27 17:25:07Z

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

answered Sep 27, 2021 at 17:25

Sebastian Hajdus

1,5601 gold badge8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related