[BUG] Error: Module level directives cause errors when bundled, 'use client' was ignored

[roelkoops]

Hello! I'm using react-tooltip within my Mendix pluggable widget.
When I upgrade react-tooltip from 5.12.0 to 5.13.0 or 5.13.1 I'm no longer able to build my widget and I'm getting this error:

node_modules\react-tooltip\dist\react-tooltip.min.mjs (7:0) Error: Module level directives cause errors when bundled, 'use client' was ignored.5

I see that 'use client' is added in commit 0ae1c20 to prevent breaking Next.js 13 projects.
Any idea how to fix this issue?

[YTRodi]

same problem here :(

[danielbarion]

Hi, can you guys provide a reproducible example, please?

[roelkoops]

Hello Daniel,

Here the steps to reproduce my issue:

Clone this demo project:
git clone https://github.com/roelkoops/tooltipdemo.git

Install the dependencies:
npm install

Run the release script:
npm run release

See that we can build the demo widget succesfully when we use v5.12.0

Now, install v5.13.0:
npm install react-tooltip@5.13.0

Run the rease script again:
npm run release

See that we now get an error:
"Error: Module level directives cause errors when bundled, 'use client' was ignored"

[danielbarion]

After checking the example repo and checking for the issue at the web, I believe the best way to handle this issue is to remove the 'use client' from our library, and in our troubleshooting section, suggest to the devs to create a Tooltip component in their projects with the 'use client' at the top of it.

Does it make sense @gabrieljablonski?

[gabrieljablonski]

@danielbarion How do other libraries usually tackle this issue? My guess is they just ignore it and let the user handle it themselves, so removing "use client" and adding a troubleshooting section seems adequate.

Another possibility would be to add a postinstall script that checks whether we're in a next.js project and automatically adding the directive to the build files, but that seems excessive.

For the troubleshooting section, we should definitely add a snippet the user can just copy and paste to get it to work, such as:

// src/components/ReactTooltip.tsx
"use client"

export * from 'react-tooltip'

Not sure if this exact snippet would work as is, but it should be as simple as possible.

[danielbarion]

I tested your code snippet without the use client directly in react-tooltip dist files and worked for both scenarios. I'll create a PR with this change, thanks!

[roelkoops]

Thanks a lot!