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
- Add core package to a NextJS 13 app
- Build the app
- Run the app
What package is effected by this issue?
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)
@qruz-hq & @taylorjdawson In NextJS you can solve by setting changing in NextJS config file:
@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…
@qruz-hq we are going to try and look at this next week.
Any news ?