[BUG] Client-side error (".jsx is not a function") in production (minified) NextJS app

[thomasmost]

Describe the bug

We are using NextJS. We have used react-tooltip v4 with no problem. We have wrapped it with the mounting effect to avoid SSR errors. When we update to v5, we get an application (client-side) error in production that reads a.jsx is not a function. The library functions fine in development.

Version of Package
v5.9.1

To Reproduce
deploy a production build of a NextJS app using a tooltip of this version—navigate to the page. Note that this is a run-time application error, not a build error.

Expected behavior
It should not crash the application

Screenshots

Desktop (please complete the following information if possible or delete this section):

• MacOS
• Firefox
• 110.0.1 (64-bit)
• React 18 / Next 13

Additional context
We are also using a turbo-repo, though I don't expect that's the issue

[nipunahh]

+1 for this. Our production is also gone now 😪

[gabrieljablonski]

Do you mind creating a sample project to help us debug the issue? Just a simple NextJS project with the tooltip.

For now, please try v5.8.3 and see if it still happens.
We switched from rollup to esbuild on v5.9.0, so that might be the cause.

[nipunahh]

@gabrieljablonski Same issue on v5.8.3 as well

[smurf-ss]

I fixed version "react-tooltip": "^5.8.3" to "react-tooltip": "5.8.3".
It worked in production. @gabrieljablonski @nipunahh

[danielbarion]

Hi guys, can someone create a sample project with this issue, please?

We will take a look as soon as possible when someone provides a sample project. Thanks!

[briva]

Same here downgrade to 5.8.3 fixed the pb

[devilsgeographer]

I have the same issue. If I set swcMinify: false in next.config.js, the error goes away.

Changing from "react-tooltip": "^5.7.4", to "react-tooltip": "5.8.3", also resolves it.

[thomasmost]

@gabrieljablonski and @danielbarion Sorry about the delay, here ya go: https://github.com/thomasmost/react-tooltip-repro

Reproduced with the latest version (5.10)

Steps to repro:

1. Clone the above repository
2. npx next build
3. npx next export
4. npx serve out
5. Navigate to localhost:3000

Thank you!

[gabrieljablonski]

@thomasmost Thanks for taking the time. As @devilsgeographer mentioned, you can set swcMinify: false on next.config.js as a workaround to this issue.

We'll be investigating why this is happening, but it seems to be an issue with the interaction between the default NextJS 13 minifier and our own bundling/minification process.

The issue will stay open until we figure it out.

[thomasmost]

@gabrieljablonski Glad to help! And no problem at all, as others have also mentioned, 5.8.3 doesn't seem to have this behavior. So I think I'm set for the time being 🙂

[nipunahh]

Thanks a lot @thomasmost - you're a lifesaver

[danielbarion]

Hi, can you try this beta version and let me know if it worked, please?

react-tooltip@5.10.1-beta.4

[danielbarion]

@thomasmost thanks for the example repository, testest on it and it's working, please test and let me know

[thomasmost]

@danielbarion Working in my sample repo! Gonna try it in my main project as well

[thomasmost]

Working in my deployed app as well!

[GerkinDev]

After some researches, it seems to be caused by the SWC minifier, enabled by default on next 13 onwards

The SWC compiler had quite a lot of issues that looks a lot like the one you pointed out. See for example vercel/next.js#40601. I've tried react-tooltip@5.10.1-beta-7 on the provided repro https://github.com/thomasmost/react-tooltip-repro and the issue reappeared. I managed to solve it by setting swcMinify to false in next.config.js.
Using minified or unminified versions of react-tooltip did not changed anything. Eg: both works as long as swcMinify is false.
Also, both minified and unminified versions of 5.10.1-beta.4 works.

Since other bundlers work without any problem, I have the feeling that this is a bug of swcMinify, that Terser (used when swcMinify: false) does not have. Knowing the complexity of minifiers, I would not be surprised at all if it were a bug of swc, not really related to this package.

[thomasmost]

I would not be surprised at all if it were a bug of swc, not really related to this package.

That being the case, what was changed in 5.10.1-beta.4 to resolve the issue though?

I can also link this issue with one in the NextJS GitHub...

[danielbarion]

@thomasmost not sure because we do not track beta releases, they are just for testing possible solutions purpose, also we have 2 PRs opened, one of them we started with the 5.10.1-beta.5, so, 5.10.1-beta.4 was before, maybe @gabrieljablonski remember

[gabrieljablonski]

@danielbarion #981 (comment)

not sure what was the exact change, but maybe this helps tracking it down

[danielbarion]

ohh, nice @gabrieljablonski

@thomasmost probably the first commit is related to the version that you want know the changes: 86549ee

[binomialstew]

I can confirm that react-tooltip@5.10.1-beta.4 corrects the issue for me. Will there be a patch version released with this?

[danielbarion]

Hi guys, we are still working on this, please check open PRs and let us know wich works 100% for you!

Thanks

[binomialstew]

Unfortunately, I am not finding a beta that works 100%.

react-tooltip@5.10.1-beta.4: Has issue 987 (more minor than the issues in beta-9 and beta-10, IMO. This fixes the issue discussed in this thread.)
react-tooltip@5.10.1-beta-9: Has issue 987 and issue 986
react-tooltip@5.10.1-beta-10: Has issue 987 and issue 972

[danielbarion]

I'll take a look as soon as possible at what we changed for beta 4, thanks for letting us know

ps: I'll probably have time to handle this more carefully next week

[danielbarion]

guys, just a heads up, please check this comment: #984 (comment)

[wilson208]

guys, just a heads up, please check this comment: #984 (comment)

5.10.2-beta.1 fixes this issue for me on NextJS 13.1.6 (using SWC, not using experimental app folder), in both dev and production builds

[pohy]

The latest version (5.10.4) still has this issue for us.
We are using NextJS 13 with babel.
Downgrading to 5.8.3, as suggested above, helped.

[danielbarion]

@pohy @everyone please try this one: #984 (comment) (the next release candidate) and let us know.

I tested this PR using Next.js 13 + experimental APP folder and SWC enabled and worked.

[AllanOliveiraM]

This beta version is broken too
I using next 13.2.4, SWC
The error only occurs in a production build
I'm not using the app directory

When I hover over the element that triggers the tooltip, this happens

[AllanOliveiraM]

in bundle

[thathurtabit]

@pohy @everyone please try this one: #984 (comment) (the next release candidate) and let us know.

I tested this PR using Next.js 13 + experimental APP folder and SWC enabled and worked.

I can confirm I'm running "next": "13.2.4", and after installing "react-tooltip": "^5.10.2-beta.4", and running npm run build and npm run start I'm no longer getting the above issues.

[danielbarion]

@AllanOliveiraM can you provide an example so I can test it, please?

Thanks for confirming @thathurtabit!

[danielbarion]

@thomasmost just tested your example and upgrading to Next.js 13.2.5-canary.22 release fixed the issue, so, probably next stable release of next.js will solve the problem (as it seems to be caused by next.js)

cc @gabrieljablonski

[AllanOliveiraM]

@danielbarion
I installed Next version 13.2.5-canary.22 as you mentioned and that apparently fixed the issue
However, I don't understand exactly what the problem is
You who are inside the project will be able to answer me more safely, could there be a bug hidden in the react-tooltip code or can I rest assured that an update of next makes everything stable?
What do you think?

[GerkinDev]

As mentioned above (#972 (comment)), I personally highly suspect a bug in SWC minifier. All beta release you've seen mentioned are tries to limit occurrence of this suspected bug.

I cannot strictly affirm it is a bug in next.js, nor affirm it is a bug in react-tooltip. That very specific kind of issue is a hell to diagnose properly.

Sorry for the back & forth.

[AllanOliveiraM]

Well thanks a lot for the help
I'm going to test and monitor it, since I depend a lot on the library
Anyway, if it happens again, I'll come here to tell you with more information to debug

[gabrieljablonski]

I'd say we can technically consider #984 a fix for this issue.

In case Next.js takes too long to promote this new version to stable, we might consider adding a troubleshoot section to the docs/readme so people aren't left on the dark about this.