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

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'),
        },
        ...
      ]
    }