Webpack build babel-loader error parsing some typescript/es lib Module parse failed: Unexpected token

Nhan Cao
1 min readJul 21, 2023

Error detail:

./node_modules/@walletconnect/ethereum-provider/dist/index.es.js 59:10
Module parse failed: Unexpected token (59:10)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| rpcMap: M
| },
> l = n?.filter(g => !u.includes(g)),
| d = i?.filter(g => !p.includes(g));
| if (!s && !c && !e && !(l != null && l.length) && !(d != null && d.length)) return {

Reason:

Because the @walletconnect/… lib is es types, the current parse does not understand some modern syntax/function like ?. | ??

Fix:

  • We need to use another loader for those ones:
  • Install esbuild-loader: yarn add esbuild-loader@3.0.1
"@walletconnect/ethereum-provider": "2.9.0",
"@walletconnect/modal": "2.6.0",
"babel-loader": "8.3.0",
"esbuild-loader": "3.0.1",
  • Add loader rule to webpack.config.js
module: {
rules: [
....
// Add es loader for walletconnect v2
{
test: /node_modules[\\/]@walletconnect/,
loader: require.resolve('esbuild-loader'),
},
...
]
}

--

--

No responses yet