Module parse failed: Unexpected token (2:9801) in jwplayer-react.js

Question

I'm trying to add a JW Player v1.1.3 instance in my react v16.8.1.
I ran the command yarn add @jwplayer/jwplayer-react to install the player. After trying to import the player with:

import JWPlayer from "@jwplayer/jwplayer-react";

I got the following error message:

./node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js
Module parse failed: Unexpected token (2:9801)
You may need an appropriate loader to handle this file type.

I reformatted the code of the file (where the error occurs) ./node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js to get more details about where exactly the error is, then I got this:

Failed to compile.

./node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js
Module parse failed: Unexpected token (641:16)
You may need an appropriate loader to handle this file type.
|                 i().has(r) && (t[r] = e[r]);
|               }),
|               { ...e.config, ...t, isReactComponent: !0 }
|             );
|           })(t)),
 @ ./app/front/react/containers/admin/email_template/edit.jsx 4:0-48
 @ ./app/front/packs/react/admin.js
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/front/packs/react/admin.js

So the problem (as I think) is exactly in this line (641):

|               { ...e.config, ...t, isReactComponent: !0 }

NB: I can't update the version of react

Answer 1

1. Install babel loader

npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

2. Configure Webpack by following below: In your webpack.config.js, add a rule in this file like

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

3. Check dependencies and make sure correct versions are installed like below

@jwplayer/jwplayer-react

4. Rebuild and restart:

npm run build
npm start

Thank you