Skip to content

Update troubleshooting docs #1073

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 31, 2023
Merged

Update troubleshooting docs #1073

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4988c6a
docs(troubleshooting): `can't import named export` #1070
gabrieljablonski Jul 28, 2023
3cf029d
docs(troubleshooting): shadow DOM
gabrieljablonski Jul 28, 2023
487cb3f
docs(troubleshooting): create-react-app .cjs #1067
gabrieljablonski Jul 28, 2023
c10db98
docs(troubleshooting): script comment
gabrieljablonski Jul 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions docs/docs/troubleshooting.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,58 @@ Check the examples for the [`anchorSelect`](./examples/anchor-select) and [`rend
<Tooltip id="my-tooltip" />
```

## The tooltip doesn't work when using a Shadow DOM

ReactTooltip currently does not support Shadow DOM usage, but it is on our roadmap.

See [issue #1029](https://github.com/ReactTooltip/react-tooltip/issues/1029) and [PR #1068](https://github.com/ReactTooltip/react-tooltip/pull/1068) for more info.


## `Can't import the named export 'xxx' from non EcmaScript module (only default export is available)`

This problem can be fixed by adding a rule to your `webpack.config.js` file (or equivalent).

```js
module.exports = {
...
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
}
]
}
}
```

:::info

If you're running into this on a project not using webpack, please [submit a bug report](https://github.com/ReactTooltip/react-tooltip/issues/new/choose) with information about your setup.

:::

## The tooltip component is `undefined` ([#1067](https://github.com/ReactTooltip/react-tooltip/issues/1067))

This might be related to an issue with `create-react-app` not supporting `.cjs` files, which is the default extension for the ReactTooltip dist file (`react-tooltip.min.cjs`).
See [`cra`'s issue #12700](https://github.com/facebook/create-react-app/issues/12700#issuecomment-1463040093) for the recommended way to fix this for all of your project dependencies.

If you wish to only fix this for `react-tooltip`, see below.

By default, your project will be importing the `react-tooltip.min.cjs` file. To workaround this, you must change the ReactTooltip `package.json` file (not the one on the root of your project!).
To do this, run the following inside your project directory:

```sh
# if you're on Windows, just download the `.patch` file manually
wget https://github.com/ReactTooltip/react-tooltip/files/12195501/react-tooltip-1067.patch
git diff react-tooltip-1067.patch
```

This will apply the necessary changes (which you can check out for yourself).
The only problem with this approach is that reinstalling `react-tooltip`, or cloning your project into a new environment, means you'll have to apply the changes again.
For that reason, consider the [recommended solution](https://github.com/facebook/create-react-app/issues/12700#issuecomment-1463040093) mentioned above, or using [`patch-package`](https://www.npmjs.com/package/patch-package).

## 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.
Expand Down