From 4988c6a4b0aa263979696c2abf8a99e4c26790ec Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Fri, 28 Jul 2023 10:10:50 -0300 Subject: [PATCH 1/4] docs(troubleshooting): `can't import named export` #1070 --- docs/docs/troubleshooting.mdx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/docs/docs/troubleshooting.mdx b/docs/docs/troubleshooting.mdx index 9959f31d..3bdc61f3 100644 --- a/docs/docs/troubleshooting.mdx +++ b/docs/docs/troubleshooting.mdx @@ -148,6 +148,31 @@ Check the examples for the [`anchorSelect`](./examples/anchor-select) and [`rend ``` +## `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. + +::: + ## 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. From 3cf029d3f443f56ca1a14c790cfe3d4c7d2025a8 Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Fri, 28 Jul 2023 10:31:41 -0300 Subject: [PATCH 2/4] docs(troubleshooting): shadow DOM --- docs/docs/troubleshooting.mdx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/docs/troubleshooting.mdx b/docs/docs/troubleshooting.mdx index 3bdc61f3..9c671d36 100644 --- a/docs/docs/troubleshooting.mdx +++ b/docs/docs/troubleshooting.mdx @@ -148,6 +148,13 @@ Check the examples for the [`anchorSelect`](./examples/anchor-select) and [`rend ``` +## 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). From 487cb3fcd77076ac6de274d0c7118233fbcea284 Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Fri, 28 Jul 2023 11:42:30 -0300 Subject: [PATCH 3/4] docs(troubleshooting): create-react-app .cjs #1067 --- docs/docs/troubleshooting.mdx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/docs/docs/troubleshooting.mdx b/docs/docs/troubleshooting.mdx index 9c671d36..2e1023ae 100644 --- a/docs/docs/troubleshooting.mdx +++ b/docs/docs/troubleshooting.mdx @@ -180,6 +180,26 @@ If you're running into this on a project not using webpack, please [submit a bug ::: +## 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. From c10db982a1920ec673be74a4b9dad658f615a9ea Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Fri, 28 Jul 2023 11:44:12 -0300 Subject: [PATCH 4/4] docs(troubleshooting): script comment --- docs/docs/troubleshooting.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/troubleshooting.mdx b/docs/docs/troubleshooting.mdx index 2e1023ae..c07d288b 100644 --- a/docs/docs/troubleshooting.mdx +++ b/docs/docs/troubleshooting.mdx @@ -191,7 +191,7 @@ By default, your project will be importing the `react-tooltip.min.cjs` file. To To do this, run the following inside your project directory: ```sh -// if you're on Windows, just download the `.patch` file manually +# 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 ```