You may need an appropriate loader to handle this file type - React

Question

Hello I am doing blockchain with React but when I import Web 3 using

import Web3 from 'web3'

it give me this error:

./node_modules/web3-eth-accounts/lib/index.js
Module parse failed: Unexpected token (225:12)
You may need an appropriate loader to handle this file type.
|         }
|         return signed({
|             ...tx,
|             chainId: args[0],

I am using node 14.17.1 and I created this using

create-react-app my-app --scripts-version 1.1.5

and I installed web3 using

npm install web3

This is the tsconfig.json file and this file showing errors as well

{
    "extends": "../../tsconfig.json",
    "compilerOptions": {
      "outDir": "./lib",
      "esModuleInterop": true
    },
    "include": [
      "./src"
    ]
   }

and index.js code where the error is referring

return signed({
            ...tx,
            chainId: args[0],
            nonce: args[1],
            networkId: args[2],
            ...args[3] // Will either be gasPrice or maxFeePerGas and maxPriorityFeePerGas
        });

Answer 1

Your project's created with --scripts-version 1.1.5 which mean its babel can not parse ..., consider to use higher scripts-version. For me, I upgraded from 1.1.4 to 3.2.0