Skip to content

Commit

Permalink
docs: move next.js troubleshooting to the bottom
Browse files Browse the repository at this point in the history
  • Loading branch information
gabrieljablonski committed Jun 22, 2023
1 parent 45182c5 commit fac0216
Showing 1 changed file with 38 additions and 38 deletions.
76 changes: 38 additions & 38 deletions docs/docs/troubleshooting.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -64,44 +64,6 @@ If you've imported the default styling and the tooltip is still not showing up w

If `data-tooltip-content` and `data-tooltip-html` are both unset (or they have empty values) on the anchor element, and also the `content`, `render`, and `children` props on the tooltip are unset (or have empty values), the tooltip is not shown by default.

## Next.js `TypeError: f is not a function`

This problem seems to be caused by a bug related to the SWC bundler used by Next.js.
The best way to solve this is to upgrade to `next@13.3.0` or later versions.

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

## Next.js `"use client"` error

This normally happens when you use `react-tooltip` inside a component that is not tagged as client component. For more info, see the [Next.js docs](https://nextjs.org/docs/getting-started/react-essentials#client-components).

To use `react-tooltip` on Next.js 13 without having to tag your component or page as a client component, just create a new file `ReactTooltip.tsx` (for this example, the file path is `src/components/ReactTooltip.tsx`) and place the following code inside of the created file:

:::caution

Avoid naming the file `react-tooltip.tsx` (or with whichever extension your project uses), since it may interfere with your editor's autocomplete funcionality.

:::

```jsx
// src/components/ReactTooltip.tsx
'use client'

export * from 'react-tooltip'
```

And in the place that you are importing React Tooltip:

```jsx
// ❌ Old
import { Tooltip } from 'react-tooltip'
```

```jsx
// ✅ New
import { Tooltip } from 'components/react-tooltip'
```

## Bad performance

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.
Expand Down Expand Up @@ -156,3 +118,41 @@ Check the examples for the [`anchorSelect`](./examples/anchor-select) and [`rend
</div>
<Tooltip id="my-tooltip" />
```

## Next.js `TypeError: f is not a function`

This problem seems to be caused by a bug related to the SWC bundler used by Next.js.
The best way to solve this is to upgrade to `next@13.3.0` or later versions.

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

## Next.js `"use client"` error

This normally happens when you use `react-tooltip` inside a component that is not tagged as client component. For more info, see the [Next.js docs](https://nextjs.org/docs/getting-started/react-essentials#client-components).

To use `react-tooltip` on Next.js 13 without having to tag your component or page as a client component, just create a new file `ReactTooltip.tsx` (for this example, the file path is `src/components/ReactTooltip.tsx`) and place the following code inside of the created file:

:::caution

Avoid naming the file `react-tooltip.tsx` (or with whichever extension your project uses), since it may interfere with your editor's autocomplete funcionality.

:::

```jsx
// src/components/ReactTooltip.tsx
'use client'

export * from 'react-tooltip'
```

And in the place that you are importing React Tooltip:

```jsx
// ❌ Old
import { Tooltip } from 'react-tooltip'
```

```jsx
// ✅ New
import { Tooltip } from 'components/react-tooltip'
```

0 comments on commit fac0216

Please sign in to comment.