Error in Next.js production environment: TypeError: undefined is not an object

[DanLeCornu]

🐛 Bug Report

In a Next.js production environment, when the Joyride component prop "run" is set to true, it throws a runtime error:

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'l[c=(l=n.split(/(\+|\-)/).map(function(e){return e.trim()})).indexOf(eT(l,function(e){return -1!==e.search(/,|\s/)}))]')

and the Joyride component is not rendered. Works fine in local environment, with or without using a custom component in the "tooltipComponent" prop.

To Reproduce

Implement Joyride in a React Next.js project and deploy to a production environment

Expected behavior

No error to be thrown, and the Joyride component to show

Link to repl or repo (highly encouraged)

Unfortunately cannot reproduce in codesandbox as it's only a problem in production Next.js environments.

Run npx envinfo --system --binaries --npmPackages react-joyride

Have run above command, but it's from my local env which works fine so not particularly useful.

  System:
    OS: macOS 12.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 117.81 MB / 16.00 GB
    Shell: 3.2.2 - /usr/local/bin/fish
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm

Other relevant details: "react": "17.0.2", "react-joyride": "^2.5.3", "next": "12.3.1",

[mhjmaas]

+1 on this. I have the same issue after upgrading to Next 13 and React 18. Would love to see a fix or workaround since our entire onboarding is based on Joyride and would love to keep using it.

Edit: I've had a deeper look and it seems to have something to do with the popper.js parseOffset function. The current joyride dependency react-floater is using an older (deprecated) version of popper.js I believe an upgrade to the newer react-floater (which uses the @popperjs/core) might just fix the issue already.

[tientm-dsv]

+1 on this. I have the same issue

[tientm-dsv]

+1 on this. I have the same issue Hey everyone, I found the problem. I met this issue when I upgraded webpack from v4 to v5. So I try downgrading to v4 and it works perfectly 🎉 . Hope this helps everyone

[mhjmaas]

+1 on this. I have the same issue Hey everyone, I found the problem. I met this issue when I upgraded webpack from v4 to v5. So I try downgrading to v4 and it works perfectly 🎉 . Hope this helps everyone

Great to see you have found a workaround. I'm afraid it will not help those who are using NextJS, like myself because this does not allow us to downgrade to Webpack 4. (unless still running NextJS 11). But it for sure helps in the debugging I guess.

[JClackett]

Has anyone found a work around for next.js users yet?

[JClackett]

@mhjmaas it looks like react-joyride is using the latest version of react-floater that does use the @popperjs/core package?

[mhjmaas]

@mhjmaas it looks like react-joyride is using the latest version of react-floater that does use the @popperjs/core package?

You're right. I must have been looking at an older version in my node_modules. It doesn't make a difference then...

[gilbarbara]

Hey! I finally had some time to take a look at this. Sorry for the delay.

This problem is with the experimental SWC minification using the swcMinify config. It tries to optimize too much, leading to the offset variable not being used before it is declared. It's not a problem with the version of popper.js or any other dependency. There's a discussion in the Next.js repo about their problems with this experimental flag.

The workaround is to disable the swcMinify config.

[JClackett]

Thanks for responding! any ideas if it's possible to refactor in some way to get it working with

[gilbarbara]

@JClackett Not really. It's a problem with their implementation of SWC, and that's why it is flagged as experimental.

[JClackett]

Yeah all good, it is enabled by default now in next 13 though. They've marked it as stable

[gilbarbara]

@JClackett I just confirmed that SWC Minifier was marked as stable. I was confused by the debug options still available in the docs.

The problem is that the SWC minification breaks an external library code. The discussion for SWC minification is still very active, so this is not an isolated case. There are dozens of issues for similar problems, and hopefully, this will get fixed in a future version.

[kdy1]

Did you try canary? There's only one known minifier issue at the moment

[JClackett]

For people in this thread, open discussion about swc minifier here

[billnbell2]

SWC has a bunch of parameters - do you know which one fixes it?

https://swc.rs/docs/configuration/minification

[billnbell2]

no comment? Anyone else try this?