[BUG] Getting 'TypeError: b is not a function' for production build

[thomasbottonari]

Describe the bug
My tooltip is working just fine when running locally with my NextJS dev server. However my production build throws the following error:

Uncaught (in promise) TypeError: b is not a function
at _ (747-e70f1fec8bbda825.js:1:2290)
at Object.isRTL (747-e70f1fec8bbda825.js:1:7593)
at 747-e70f1fec8bbda825.js:1:7765
at $ (747-e70f1fec8bbda825.js:1:9305)
at et (747-e70f1fec8bbda825.js:12:4104)
at 747-e70f1fec8bbda825.js:12:8615
at uU (framework-3b5a00d5d7e8d93b.js:9:84130)
at oV (framework-3b5a00d5d7e8d93b.js:9:113201)
at o (framework-3b5a00d5d7e8d93b.js:9:107748)
at x (framework-3b5a00d5d7e8d93b.js:33:1374)

When I remove the Tooltip element the error goes away. I attempted to get more information by turning off minification in my NextJS build, and that actually caused the error to go away entirely.

Version of Package
v5.7.3 (also tested with 5.7.2 and 5.6.0)

To Reproduce
Run a production build with minification (not sure if there is something specific to NextJS)

Expected behavior
No Errors, and the tooltip renders on the browser

[gabrieljablonski]

Are you able to create a minimal sample project with just the basic setup reproducing the problem? It could be a CodeSandbox or a git repo if that's easier.

[thomasbottonari]

@gabrieljablonski here is a repo with the issue. it works if you use npm run dev, but if you do npm run build followed by npm run start, you'll see the error I'm talking about.

https://github.com/thomasbottonari/react-tooltip-error

[gabrieljablonski]

Thanks for taking the time.

I'm honestly not sure what's causing this, but my first guess is some issue with the minifier.

This is the code formatted using the devtools. Line 517 is the problem, in which w is being called, but it not a function.

But that shouldn't be the case, since you can see right above the declaration for b() is the declaration for w().

For reference, b() is getComputedStyle() from floating-ui and w() is (or should be) getWindow().

If you inspect w:

I haven't fully followed the call stack to make sure, but I'm quite sure the w object is being overwritten in line 1445:

---

I'm positive this isn't a problem directly with react-tooltip. It might be with floating-ui, but I'm leaning towards being a problem with the default minifier for Next.js.

If you're willing to investigate further, what I'd recommend you do next is try to use a different minifier engine (not sure how you'd do that, you can probably set it up somehow in the Next.js config).

Another thing you could try is changing the sample project you built to call computePosition() directly from floating-ui (import { computePosition } from '@floating-ui/dom') and see if the problem still happens (I'm guessing it will), and then you can submit a issue there.

[thomasbottonari]

Thanks for looking into it. I'll probably just look for another tooltip solution, rather than invest more time in trying to get it to work. I'd rather not deviate from NextJS default configuration.

[danielbarion]

Just a heads up, your example is using Next.js 13, we didn't test Next.js 13 with our library. I'm a fan of the Next.js project, but Next 13 still has a lot of bugs and we should wait more time for the next releases (this is only my opinion).

The library is working fine with Next.js 12, also, you always can import React-Tooltip minified or not, the default one is minified but we export non-minified too as you can see here: https://github.com/ReactTooltip/react-tooltip#standalone

[thomasbottonari]

It looks like Next.js switched their default minifier as of v13 (https://nextjs.org/docs/advanced-features/compiler#minification). If you set swcMinify: false, it will use Terser instead of SWC. I confirmed that this works for me and the performance hit during build time isn't a concern for me.

[gabrieljablonski]

Good to know my diagnosis wasn't far off haha

Thanks for reporting this, other people will probably run into it as well.

[mattdwardle]

I was able to resolve this issue by importing import { Tooltip as ReactTooltip } from 'node_modules/react-tooltip/dist/react-tooltip.umd.js' directly. If you don't want to change swcMinify to false.

[thomasbottonari]

I was able to resolve this issue by importing import { Tooltip as ReactTooltip } from 'node_modules/react-tooltip/dist/react-tooltip.umd.js' directly. If you don't want to change swcMinify to false.

In case it helps others, I was able to implement an import redirect in next.config.js so that I don't accidentally import the wrong one in the future. Here is the code to do that.

webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-tooltip$': path.resolve(
        __dirname,
        'node_modules/react-tooltip/dist/react-tooltip.umd.js'
      ),
    };
    return config;
  }

With this in place you can just import { Tooltip } from 'react-tooltip'; as you normally would.

[gabrieljablonski]

Upgrading to Next.js >= 13.3.0 also fixes this. For more info see #1001