web3-onboard: [Bug]: NextJs 13 incompatibility

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

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 4
  • Comments: 24 (12 by maintainers)

Most upvoted comments

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

swcMinify: false,

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

Closing as docs have been updated to reflect

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.

@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): https://github.com/vercel/next.js/issues/36221

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…

image

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

Any news ?