Module parse failed: Unexpected token (255:5)

[wnz99]

Is there an existing issue for this?

• I have searched the existing issues

Package Version

Module parse failed: Unexpected token (255:5)

Current Behavior

CRA with package [email protected] fails with this error:

./node_modules/wagmi-core/dist/wagmi-core.esm.js 255:5
Module parse failed: Unexpected token (255:5)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| class InjectedConnector extends Connector {
>   id = 'injected';
|   ready = typeof window != 'undefined' && !!window.ethereum;
|   #provider;

wgami versions below 0.2.15 work fine.

Expected Behavior

[email protected] should still be supported.

Steps To Reproduce

• Boostrap CRA project
• Add [email protected] and [email protected]

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

[jamal-jackson]

I'm experiencing this issue as well from webpack in storybook.

[tmm]

I created a CodeSandbox with [email protected] and 0.2.15 and was not able to reproduce.

https://codesandbox.io/s/220-gdqe3o?file=/src/index.tsx

@wnz99 Can you add a minimal reproducible example (feel free to fork the above CodeSandbox)?

[SonnyCastro]

Having this same issue :(

[tmm]

@SonnyCastro happy to look into it if you have a minimal reproducible example!

[SonnyCastro]

@SonnyCastro happy to look into it if you have a minimal reproducible example!

I fixed the issue by editing the browsersList within package.json

Video of solution: https://www.youtube.com/watch?v=tFqj-JKYr4M

BTW the wagmi library is great! Thank you for creating and maintaining it. It makes a lot of dev's life's easier.

You're a beast and congrats for making such a sick lib! 👏👊🔥

[yusuf8ahmed]

@SonnyCastro and @tmm , i just stumbled into this error but after watching the video I ran into this error also any guess on how to fix it?

./node_modules/wagmi-core/dist/wagmi-core.esm.js
SyntaxError: ~/client/node_modules/wagmi-core/dist/wagmi-core.esm.js: Missing class properties transform.
  257 | const shimKey = 'wagmi.shimDisconnect';
  258 | class InjectedConnector extends Connector {
> 259 |   id = 'injected';
      |   ^^^^^^^^^^^^^^^^
  260 |   ready = typeof window != 'undefined' && !!window.ethereum;
  261 |   #provider;
  262 |

[zfogg]

+1

[SonnyCastro]

@SonnyCastro and @tmm , i just stumbled into this error but after watching the video I ran into this error also any guess on how to fix it?

./node_modules/wagmi-core/dist/wagmi-core.esm.js
SyntaxError: ~/client/node_modules/wagmi-core/dist/wagmi-core.esm.js: Missing class properties transform.
  257 | const shimKey = 'wagmi.shimDisconnect';
  258 | class InjectedConnector extends Connector {
> 259 |   id = 'injected';
      |   ^^^^^^^^^^^^^^^^
  260 |   ready = typeof window != 'undefined' && !!window.ethereum;
  261 |   #provider;
  262 |

Hey Yusuf i had that exact same error and was able to resolve it with this video solution: https://www.youtube.com/watch?v=tFqj-JKYr4M

Im not sure what else to do if that doesn't resolve your issue only thing that come to mind is upgrading create-react-app version 🤷🏽‍♂️

[thomasamlee]

Try adding presets: [['@babel/preset-env', { targets: { esmodules: true } }]], to your babel presets exactly like how wagmi is configured: https://github.com/tmm/wagmi/blob/main/babel.config.js

[tmm]

Fix #289

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest wagmi version. If you have any other comments you can create a new discussion.