[bug] build with Nextjs, error 'Uncaught SyntaxError: Unexpected template string' occurs

[ranlix]

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.15

Current Behavior

Demo repo:

https://github.com/liran319/next-wagmi-demo

I have install [email protected] into my project with Nextjs, it works well when start project with 'yarn dev'.
But Uncaught SyntaxError: Unexpected template string occurs when run 'yarn build && yarn start'.

It seems that only occurs on production mode.And there is no stack to debug.
Could you please have a check?

Expected Behavior

Both development and production mode work well.

Steps To Reproduce

1. Clone the repo https://github.com/liran319/next-wagmi-demo, and enter that folder;
2. Run yarn to install deps;
3. Run 'yarn build && yarn start'
4. check console, found 'Uncaught SyntaxError: Unexpected template string', and button doesn't work

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

No response

Anything else?

No response

[o-az]

A possible solution: can you try removing swcMinify setting in your next.config.js file? I had the same issue that went away when I removed swcMinify setting.

[ranlix]

OH yes, it is! It works!
But I think there is some where can be optimized and fixed on wagmi.

Thanks you very much!

[tmm]

Spent some time looking into it. Seems related to the WalletConnectConnector (most likely one of it's dependencies, like @walletconnect/ethereum-provider).

[csadai]

Maybe related: I just upgraded to 0.2.17 and the app won't launch.
The error message Unhandled Runtime Error SyntaxError: Unexpected private name #switchChain. Cannot parse class method with private name.

My swcMinify is at false.
If I remove the WalletConnectConnector from my connectors, it works. There really seems to be a problem there.

[tmm]

What version of JavaScript are you targeting? (If you are using TypeScript, it's the target field in tsconfig.json.)

[cnasc]

Also on Next (12.1.0), using [email protected]. Found a similar issue with failures only happening in prod builds. Minimal reproduction is just importing Provider from wagmi.

In this case the message I get is:
TypeError: Cannot read properties of undefined (reading 'map') in Chromium and TypeError: i is undefined in Firefox. Unfortunately can't tell the context from the linked minified code.

I've tried going back a few versions (0.2.13 and 0.2.10) because it sounded like this worked for people on Next in the past, but same result there.

[tmm]

@cnasc I just upgraded the wagmi docs site to [email protected] and [email protected] with no build problems.

[ranlix]

What version of JavaScript are you targeting? (If you are using TypeScript, it's the target field in tsconfig.json.)

Hi there,

https://github.com/liran319/next-wagmi-demo/blob/main/tsconfig.json
You can check the version in this repo here.

[cnasc]

@cnasc I just upgraded the wagmi docs site to [email protected] and [email protected] with no build problems.

🤔 odd. Tried 0.2.18 just in case but same result. Looking at the docs site source, I don't see any difference in build config or anything. I copied https://github.com/tmm/wagmi/blob/main/docs/components/core/Providers.tsx directly just in case there was something wrong with the way I'd written it myself, but no difference.

Will have to dig deeper into the Next side of things to figure it out I think

[tmm]

@liran319 can you try with the latest version 0.2.22?

[cnasc]

can you try with the latest version 0.2.22?

On my end, 0.2.22 no longer breaks in a prod build on my app (when just importing Provider). Awesome to see, going to try integrating fully this week

[csadai]

Mine still breaks on Safari (version 14.1.2). It fails on this Webkit line https://github.com/WebKit/webkit/blob/main/Source/JavaScriptCore/parser/Parser.cpp#L3039

Exact error:

Unhandled Runtime Error
SyntaxError: Unexpected private name #switchChain. Cannot parse class method with private name.
Call Stack
eval

[native code]
./node_modules/wagmi-core/connectors/walletConnect/dist/wagmi-core-connectors-walletConnect.esm.js

My set up:

"wagmi": {
      "version": "0.2.22",
      "resolved": "https://registry.npmjs.org/wagmi/-/wagmi-0.2.22.tgz",
      "integrity": "sha512-WtpRO/JGTIrcs9vBdIJZe...",
      "requires": {
        "@ethersproject/providers": "^5.5.1",
        "@walletconnect/ethereum-provider": "1.7.5",
        "wagmi-core": "0.1.16",
        "walletlink": "^2.5.0"
      }
    },

Note: If I remove WalletConnect from my config, it works.

new WalletConnectConnector({
      options: {
        infuraId,
        qrcode: true,
      },
    }),

[tmm]

@csadai can you try now?

[csadai]

Hi @tmm Sorry I didn't sync my comment from #288. It works indeed, thanks a lot for fixing.

[tmm]

@liran319 this appears to be an issue with next's SWC minification. You can add feedback to this discussion vercel/next.js#30237

the other issue brought up in the thread is related to es6 private fields. that is now fixed.

[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.