Skip to content

Commit ed2a4e6

Browse files
committed
docs: add troubleshooting docs related to Next.js use client error
1 parent e3c3630 commit ed2a4e6

File tree

1 file changed

+25
-0
lines changed

1 file changed

+25
-0
lines changed

docs/docs/troubleshooting.mdx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,31 @@ The best way to solve this is to upgrade to `next@13.3.0` or later versions.
7171

7272
Less ideally, if you're unable to upgrade, you can set `swcMinify: false` on your `next.config.js` file.
7373

74+
## Next.js `"use client"` error
75+
76+
This normally happens when you use react-tooltip inside a component that is not tagged as client component.
77+
78+
To use react-tooltip on Next.js 13 without had to tag your component or page as client component, just create a new file `react-tooltip.tsx` and place the following code inside of the created file:
79+
80+
```jsx
81+
// src/components/ReactTooltip.tsx
82+
'use client'
83+
84+
export * from 'react-tooltip'
85+
```
86+
87+
And in the place that you are importing React Tooltip:
88+
89+
```jsx
90+
// ❌ Old
91+
import { Tooltip } from 'react-tooltip'
92+
```
93+
94+
```jsx
95+
// ✅ New
96+
import { Tooltip } from 'components/react-tooltip'
97+
```
98+
7499
## Bad performance
75100

76101
If you're experiencing any kind of unexpected behavior or bad performance on your application when using ReactTooltip, here are a few things you can try.

0 commit comments

Comments
 (0)