Title: Error: Module parse failed: Unexpected token You may need an appropriate loader to handle this file type
Tags: webpack;web3js;babel-loader
Question: Failed to compile.
./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],
|             nonce: args[1],
Got this error when I started an open source app named multisender. I actually didn't know much about webpack or babel configuration.
Extra files:
// tsconfig.js
&quot;compilerOptions&quot;: {
&quot;experimentalDecorators&quot;: true,
&quot;allowJs&quot;: true
// package.json
&quot;name&quot;: &quot;multi-sender-app&quot;,
&quot;version&quot;: &quot;0.1.0&quot;,
&quot;license&quot;: &quot;GPL3&quot;,
&quot;homepage&quot;: &quot;https://rstormsf.github.io/multisender&quot;,
&quot;dependencies&quot;: {
&quot;bignumber.js&quot;: &quot;^6.0.0&quot;,
&quot;csvtojson&quot;: &quot;^1.1.9&quot;,
&quot;gh-pages&quot;: &quot;^1.1.0&quot;,
&quot;json-validator&quot;: &quot;0.0.34&quot;,
&quot;mobx&quot;: &quot;^3.5.1&quot;,
&quot;mobx-react&quot;: &quot;^4.4.2&quot;,
&quot;node-sass-chokidar&quot;: &quot;0.0.3&quot;,
&quot;nodemon&quot;: &quot;^1.15.1&quot;,
&quot;react&quot;: &quot;^16.2.0&quot;,
&quot;react-app-rewire-mobx&quot;: &quot;^1.0.7&quot;,
&quot;react-app-rewire-preact&quot;: &quot;^1.0.1&quot;,
&quot;react-app-rewired&quot;: &quot;^1.4.1&quot;,
&quot;react-dom&quot;: &quot;^16.2.0&quot;,
&quot;react-json-view&quot;: &quot;^1.16.1&quot;,
&quot;react-radio-group&quot;: &quot;^3.0.2&quot;,
&quot;react-router-dom&quot;: &quot;^4.2.2&quot;,
&quot;react-scripts&quot;: &quot;1.1.1&quot;,
&quot;react-select&quot;: &quot;^1.2.1&quot;,
&quot;react-spinners&quot;: &quot;^0.2.6&quot;,
&quot;react-validation&quot;: &quot;^3.0.7&quot;,
&quot;splash-screen&quot;: &quot;^4.0.1&quot;,
&quot;store2&quot;: &quot;^2.7.0&quot;,
&quot;sweetalert&quot;: &quot;^2.1.0&quot;,
&quot;web3&quot;: &quot;^1.0.0-beta.30&quot;
&quot;scripts&quot;: {
&quot;build-css&quot;: &quot;node-sass-chokidar src/assets/stylesheets/application.scss -o src/assets/stylesheets --output-style=compressed&quot;,
&quot;watch-css&quot;: &quot;nodemon -e scss -x \&quot;npm run build-css\&quot;&quot;,
&quot;start&quot;: &quot;react-app-rewired start&quot;,
&quot;build&quot;: &quot;react-app-rewired build&quot;,
&quot;test&quot;: &quot;react-app-rewired test --env=jsdom&quot;,
&quot;eject&quot;: &quot;react-app-rewired eject&quot;,
&quot;predeploy&quot;: &quot;npm run build&quot;,
&quot;deploy&quot;: &quot;gh-pages -d build -o rstorm&quot;
I tried to solve this by upgrading all the packages to latest version, but it created another error: The &quot;injectBabelPlugin&quot; helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement
I read documentation for using customize-cra but I couldn't understand it. So I want to know if can solve this issue without updating packages?
Comment: Try this solution https://stackoverflow.com/a/69279705/5732802


Here is another answer: Check your node version, perhaps the spread operator is not supported. You must replace &quot;...tx&quot;.
Versions until 8.6 don't support the spread operator.
See spread operator compatibility
Spread in array literals: &gt; v5.0.0
Spread in function calls: &gt; v5.0.0
Spread in object literals: &gt; v8.3.0

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:10/06/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<webpack><web3js><babel-loader>', 'Title': 'Error: Module parse failed: Unexpected token You may need an appropriate loader to handle this file type', 'ViewCount': 1156, 'id': 69470034, 'user_AboutMe': None, 'user_AccountId': 17061273.0, 'user_DisplayName': 'Mahesh Ghamaand', 'user_Reputation': 311.0, 'user_Views': 3.0, 'user_id': 12344647.0}}