[Bug]: NextJs 13 incompatibility

[qruz-hq]

Current Behavior

On the dev environnement everything runs as it should, but on production (build) it throws a client-side error.

Everything worked as it should on NextJs 12. I only updated the NextJS version to the latest.

Expected Behavior

No response

Steps To Reproduce

1. Add core package to a NextJS 13 app
2. Build the app
3. Run the app

What package is effected by this issue?

@web3-onboard/core

Is this a build or a runtime issue?

Build, Runtime

Package Version

latest (2.10.0)

Node Version

16

What browsers are you seeing the problem on?

No response

Relevant log output

TypeError: Cannot read properties of undefined (reading 'context')
    at az (_app-ce8b79dbd96579e9.js:204:6778)
    at new s9 (_app-ce8b79dbd96579e9.js:247:1482)
    at _app-ce8b79dbd96579e9.js:341:173
    at lo (_app-ce8b79dbd96579e9.js:341:201)
    at 67311 (_app-ce8b79dbd96579e9.js:29:5824196)
    at i (webpack-1e9bcc2803bdfe55.js:1:167)
    at 58473 (_app-ce8b79dbd96579e9.js:29:13498)
    at i (webpack-1e9bcc2803bdfe55.js:1:167)
    at _app-ce8b79dbd96579e9.js:29:13404
    at main-3865b822287975ac.js:1:22562

this points to this part of the code on the built package, couldn't find much on the source, maybe it's a dependency issue ?

...
    set_current_component(component);
    const $$ = component.$$ = {
        fragment: null,
        ctx: [],
        // state
        props,
        update: noop,
        not_equal,
        bound: blank_object(),
        // lifecycle
        on_mount: [],
        on_destroy: [],
        on_disconnect: [],
        before_update: [],
        after_update: [],
        context: new Map(options.context || (parent_component && parent_component.$$ ? parent_component.$$.context : [])),
        // everything else
        callbacks: blank_object(),
        dirty,
        skip_bound: false,
        root: options.target || parent_component.$$.root
    };
...

### Anything else?

_No response_

### Sanity Check

- [X] If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example).

[taylorjdawson]

@qruz-hq Sweet thanks for raising this, we'll make sure that this gets sorted out shortly!

[qruz-hq]

Any news ?

[aaronbarnardsound]

@qruz-hq we are going to try and look at this next week.

[taylorjdawson]

@qruz-hq Here's a working nextjs v13 example! Lmk if that helps :) and then please close if it does. We'll check back next week and close if no response.

[GarrettJMU]

@qruz-hq & @taylorjdawson In NextJS you can solve by setting changing in NextJS config file:

swcMinify: false,

[Adamj1232]

Closing as an example is provided. Please feel free to continue the conversation or reopen if issues persist. Thanks all!

[0xflumedev]

So this was closed, is it going to actually be fixed in the next release of Next.js? We encountered this when going to production today too. Thanks!

[0xflumedev]

Also, swcMinify: false did allow the app to load, but now the onboarding dialog CSS's are playing up 🙁

Update: False alarm, the styles seem to be caused by something else..

[andyrobert3]

@qruz-hq & @taylorjdawson In NextJS you can solve by setting changing in NextJS config file:

swcMinify: false,

@GarrettJMU
Thank you for this!

Why does this change with SWC compiler, fix this? And how did you stumble upon the fix here?
Very curious about your thinking process 😄

[GarrettJMU]

@andyrobert3 I'd run into this error on something similarly related. From my understanding SWC just has some bugs they are working out. More reading here on something semi-related (and where I hit my bug in the past):
vercel/next.js#36221

[JamieLottering]

This should be re-opened - the workaround by setting swcMinify to false is not really a long term solution as some NextJS 13 features require it to be enabled (and the perf boost by using it is big).

[chinchaun]

I'm having the same problem with
"next": "13.1.2",
"@web3-onboard/core": "2.8.2",
"@web3-onboard/react": "2.3.2",

[taylorjdawson]

@chinchaun what version of nodejs are you running?

[taylorjdawson]

The issue is with nodejs versions less <18. The simplest fix would be to run the latest most up to date version of node js which includes the fetch pollyfills. For those on nodeJs versions <18 we'll issue a fix and update the issue here once completed.

[chinchaun]

@taylorjdawson

@chinchaun what version of nodejs are you running?

node v16.16.0

[Adamj1232]

We found the issue, seemed to be a problem with one of our dep packages. Can you confirm it is fixed on your end @chinchaun with the latest core/react/vue (which ever you use) package?

[enzoferey]

@Adamj1232 I can still see this issue on:

• Node 16.x
• "next": "13.1.6" (latest)
• "@web3-onboard/injected-wallets": "2.6.2" (latest)
• "@web3-onboard/react": "2.6.1" (latest)

[Adamj1232]

Hey @enzoferey - Im unable to reproduce - are you seeing the same error with the next13 example here - https://github.com/blocknative/web3-onboard/tree/develop/examples/with-nextjs-13

[enzoferey]

Hey @Adamj1232, sorry for the delay. Looking at the example, I noticed that I was missing to wrap the app with the provider on the _app file -- which is actually not documented on the website isn't it ?

Once I used the provider passing in the value returning from the init call it worked without having to use swcMinify: false 👍🏻

[Adamj1232]

@enzoferey good call! We will update the docs to make sure that is clear! Thank you for the heads up!!

[lamaro]

Found this issue with Coinbase "@web3-onboard/coinbase": "^2.2.0", and node 14.20 on AWS server.
Local node version is 18.12.1 and works fine

[Adamj1232]

@lamaro there are some built in polyfils on certain versions of node. Node v14 is out of scope for us, with v16 being the lowest supported by some packages

[Adamj1232]

Closing as docs have been updated to reflect

[lamaro]

Yes, after changing to node v18 and yarn instead of npm, everything works great. For some reason upgrading to node v18 wasn't enough. Yarn solved my issue. Tnx!