Module parse failed - webpack

[bshyong]

Describe the bug

I cannot get the latest module to work, is there something I need to do for this to work with webpack?

react | ERROR in ./node_modules/@web3modal/react/dist/index.js 125:25
react | Module parse failed: Unexpected token (125:25)
react | File was processed with these loaders:
react |  * ./node_modules/babel-loader/lib/index.js
react | You may need an additional loader to handle the result of these loaders.
react | |         h(!1), s(!0);
react | |         try {
react | >           v = await r(O ?? t), P.isNull(v) || (g(v), H(void 0), s(!1));
react | |         } catch (Y) {
react | |           Y instanceof Error ? H(Y) : H(new Error("Unknown error")), g(void 0), s(!1);
react | ℹ ｢wdm｣: Failed to compile.

SDK Version

• Version 2.0.0-alpha.8

To Reproduce
Steps to reproduce the behavior:

1. Run sample project with defaults

[xzilja]

You need to configure webpack / babel to work with ES2020 standard (this is what we are targeting). I believe webpack is complaining about that optional chaining operator ??

[paintoshi]

@bshyong Were you able to solve it? I'm running into the same issue and I already have this in my tsconfig.json so not sure what else to change.

 "compilerOptions": {
    "target": "es2020",

[xzilja]

@paintoshi Depending on which tools you use, adding this won't be enough. Usually it is within webpack / babel etc. where you need to add appropriate loaders or plugins to target modern js.

Latest versions of more modern tools like vitest / rollup etc. should work by default, I also think latest babel version also works with es2020.

[paintoshi]

@iljadaderko Ok thank you for quick reply. The app was created with Create React App, and I have an old react-scripts package, which in turn uses an old babel-loader. Updating it created plenty of other issues in other packages, so I need to look into this more. Probably have to update a lot to get this working.

[Edison4mobile]

Any update with this?

[xzilja]

@Edison4mobile TL;DR fix was to update babel to latest version that supports ES2020

[paintoshi]

@Edison4mobile

I can confirm that it works with the latest yarn create react-app wallet-demo --template typescript
I just had to add this line to a .env.local file GENERATE_SOURCEMAP=false
Or it creates hundreds of source file errors. It's something with the latest react-scripts 5. v4 does not have that problem but not sure if web3modal works with that. More info: mswjs/msw#1030

The only problem for me is actually updating React in our live platform. It's tremendously complex with all our dependencies. I would not be sad if web3modal worked with lower versions..

[xzilja]

@paintoshi In theory you should be able to get it working with v4 of create react app if you add babel loaders for some es2020 syntax (which works in v5 as it uses latest babel version I believe), from the top of my head:

1. Optional chaining
2. Nullish coalescing

[paintoshi]

@0xasimetriq I wonder if that's possible without ejecting the whole thing, which we probably won't do since it's a one-way operation.

[paintoshi]

@0xasimetriq Dug some more into this. Everything works while running [email protected] but that may not be an option for some since it requires React v18 which creates a lot of other problems with some dependent libraries (depending on the app).

But the problem above can be avoided without upgrading anything and without ejecting the app which cannot be reverted.

1. Install https://www.npmjs.com/package/react-app-rewired
2. Install https://www.npmjs.com/package/react-app-rewire-babel-loader
3. Add the following to your config-overrides.js

const path = require("path");
const fs = require("fs");
 
const rewireBabelLoader = require("react-app-rewire-babel-loader");
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

module.exports = function override(config) {
  config = rewireBabelLoader.include(
    config,
    resolveApp("node_modules/wagmi"),
    resolveApp("node_modules/@web3modal"),
    resolveApp("node_modules/@wagmi"),
    resolveApp("node_modules/@walletconnect")
  );

  return config
}

5. Change the scripts in package.json to use rewired (all except eject)

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

Validated running web3modal 2.0 together with old version of create-react-app and [email protected] and [email protected]

[xzilja]

@paintoshi awesome! Ty for the update, also I was under impression that react-scripts respects babel config file even when not ejected, but I guess that is wrong (been a while since I used it).

[EperezOk]

@0xasimetriq Dug some more into this. Everything works while running [email protected] but that may not be an option for some since it requires React v18 which creates a lot of other problems with some dependent libraries (depending on the app).

But the problem above can be avoided without upgrading anything and without ejecting the app which cannot be reverted.

1. Install https://www.npmjs.com/package/react-app-rewired
2. Install https://www.npmjs.com/package/react-app-rewire-babel-loader
3. Add the following to your config-overrides.js

const path = require("path");
const fs = require("fs");
 
const rewireBabelLoader = require("react-app-rewire-babel-loader");
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

module.exports = function override(config) {
  config = rewireBabelLoader.include(
    config,
    resolveApp("node_modules/wagmi"),
    resolveApp("node_modules/@web3modal"),
    resolveApp("node_modules/@wagmi"),
    resolveApp("node_modules/@walletconnect")
  );

  return config
}

5. Change the scripts in package.json to use rewired (all except eject)

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

Validated running web3modal 2.0 together with old version of create-react-app and [email protected] and [email protected]

Thanks! I just had to remove the resolveApp("node_modules/@walletconnect") line inside config-overrides.js, otherwise I was getting a compile error from that dependency.