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

🐛 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”,

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 16 (3 by maintainers)

Most upvoted comments

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.

gilbarbara on Nov 19, 2022

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

gilbarbara on Nov 20, 2022

+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

tientm-dsv on Nov 12, 2022