[react-tooltip] Element with id 'react-tooltip-base-styles' already exists

[AYColumbia]

I just added react-tooltip to our react project and followed the instructions for creating a basic tooltip as well as using the tooltip wrapper and nothing worked. I then noticed that the debug Console view had issues after which I found the error below. The troubleshooting section of the online docs did not have anything on this. Any help would be greatly appreciated as I'm not sure what's causing this.

[react-tooltip] Element with id 'react-tooltip-base-styles' already exists. Call 'removeStyle()' first

I'm attempting to use the tooltip with react-select list using a custom configured component. However, the error occurs when I just put the tooltip component on the view somewhere without referencing it by anything, i.e.,

import { Tooltip as ReactTooltip, TooltipWrapper } from 'react-tooltip'
...
<ReactTooltip id="custom-tooltip" />

I prefer to use the wrapper but it's not working even though I see no errors/warnings so not sure what I'm missing as I'm following the doc at https://react-tooltip.com/docs/examples/provider-wrapper.

My react-select is set up wrapped with the tooltip wrapper, i.e.,

import AsyncSelect, { useAsync } from 'react-select/async';
import { components } from 'react-select';
import { Tooltip as ReactTooltip, TooltipWrapper } from 'react-tooltip'
...
                        <TooltipWrapper content="Only top 100 customers in list" place="top">
                            <AsyncSelect
                                className="rs-customers-list"
                                classNamePrefix="rs-customers"
                                defaultOptions={ defaultCustomersList }
                                loadOptions={ applyCustomerFilter }
                                placeholder="Select Customer...type to filter"
                                value={ formikProps.values.CustomerNumber }
                                onChange={ (data) => handleCustomerSelectionChange(data, formikProps) }
                            />
                        </TooltipWrapper>
...

The debugger shows the tooltip is getting rendered as a but it's not showing. My App.js is set up as follows:

import 'react-tooltip/dist/react-tooltip.css'
import { TooltipProvider } from 'react-tooltip'
...
render()
{
...
            return (
                <>
                    <TooltipProvider>
                        { contents }
                        { modals }
                    </TooltipProvider>
                </>
            );
}

Let me know if there's other info I can provide. Thanks a lot.

[gabrieljablonski]

1. What version are you using? Have you tried upgrading to the latest v5.26.3?

2. Have you checked if the tooltip works on your project without using the provider?

3. Can you provide a sample project with the issue happening so it's easier for us to debug?

As a side-note, as you can see on the docs page, the provider has been deprecated, and we're dropping it on V6 (which should come around in the next several months), so we really don't recommend you use it anymore.

[AYColumbia]

Hi,
I removed the CSS import first and that did NOT work. I searched for any I may have missed and there are none. I then tried the disableStyleInjection property and that also did NOT work. :( Any other ideas?

[gabrieljablonski]

At this point, the only way to help would be to have a sample project with it happening.

Is that something you can do?

[AYColumbia]

It may be next week before I get to doing that as I may not have time this weekend. I'll see if the same thing happens with a basic project first. If it does, I'll share it with you. I say that because the one I'm working is a bit more complicated with different components like react-select, formik, etc.

[gabrieljablonski]

The issue is most likely with your basic project configuration (webpack and whatnot), very unlikely to be a bad interaction with other packages.

[gabrieljablonski]

Actually, I take that back. Since the warning messages seem to be originating from within Formik.

Although I'm skeptic, it's worth a try on a fresh project to test the interaction with Formik.

---

Until you have the time to do that, don't sweat it. The warning is harmless (other than flooding your console).

[AYColumbia]

...
Until you have the time to do that, don't sweat it. The warning is harmless (other than flooding your console).

That's good to hear so thanks for stating it. :)

Okay, I had a chance to go through a couple scenarios with mixed results.

Scenario 1 (on laptop) - note that I used visual code since IDE shouldn't make a difference.

• Created a new react app via cra
• using npm, installed bootstrap, react-bootstrap, react-select, react-tooltip and loadash
• set up a basic react form (NOT formik) with a react-select with basic data and a submit button
• dropped <Tooltip.../> without anything else referencing it
• built and ran the project
• the warnings did show up. The build and run tasks use the default "out of the box" cra
• I added formik via npm and updated the form to use formik with the tooltip no wrapped in formik and the warnings still showed in the console.
• I then deleted the node_modules folder and ran npm install to reinstall all the packages.
• rebuilt and ran the project and it ran clean with the warnings NOT showing up

At this point, I thought it may be something that the default cra script puts in the package.json that gets installed into node_modules that may be contributing to this issue. So, I deleted my work project's node_modules and recreated it and that did NOT work as the warnings continued to happen.

Scenario 2 (on a desktop install) also using visual code. Here I tried to duplicate my work configuration, i.e., using all the packages including webpack, bundling, etc.

• Created a new react app via cra
• using npm, installed bootstrap, react-bootstrap, react-select, react-tooltip, formik, loadash, cross-env, webpack, webpack-cli, babel-cli, webpack-merge, dotenv-webpack, html-webpack-plugin, mini-css-extract-plugin, copy-webpack-plugin, babel-loader, css-loader, style-loader, sass-loader and less-loader
• set up a basic react component view with formik with a react-select with basic data and a submit button
• dropped <Tooltip.../> with the select container wrapped in a div referencing the tooltip
• built and ran the project (configured package.json with webpack commands like in my work project, e.g., "build": "cross-env webpack --mode production --env production --config webpack.config.js")
• it ran clean with no warnings.

So this is strange because scenario 2 worked fine without any issues with the default cra as opposed to scenario 1 where I had to remove the node_modules from default cra and "refresh" them before it ran clean.

So scenario 2 should have showed the warnings if it was a webpack config issue because I duplicated the webpack.config.js from my work project to ensure I was as close as possible.

I'm a bit confused now as this seems to be hit and miss but in my work project where I can't get the warnings to go away.

If it helps, I followed where the code is firing the warning event here:

 react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{
        "undefined" != typeof window && window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles",{
            detail: {
                disableCore: "core" === P,
                disableBase: P
            }
        }))
    }

I know you said not to sweat it, but I'd rather not have the warnings if it can be helped. :) And yes, I know I can turn off warnings in the console. ;) Let me know if I can help in any other way since I can reproduce this in my work project.

[gabrieljablonski]

I've opened #1185 to track this. We'll be taking a look and let you know what we find.

[gabrieljablonski]

Can you share a github repo with the project from either scenario you've setup? Would be helpful to reproduce it on my machine.

[AYColumbia]

I'll try to get something up for you in the next few days. Stay tuned...

[AYColumbia]

Okay, thank you. BTW, I did forget to add one control that my work project uses that the test projects I use did NOT: react-data-grid. As I have time this week, I'll update my projects with a simple grid to see if it can be recreated consistently even though it did happen in scenario 1 without it. Just to rule out everything I guess. Thanks again.

[AYColumbia]

So, I had some time to add the react-data-grid to both test projects and both ran clean with no warnings. I wanted to make sure the grid package was/wasn't the issue and the results indicate it's NOT the culprit.

[AYColumbia]

I published the project that more closely reflects my work one. The webpack scripts for build and run are buildwp and startwp respectively. I did the whole thing in vs code so that should do the trick. I do use LESS at work so in order to build/compile the .less file, I installed Easy LESS. Don't forget to run npm install first. ;) Let me know if you have any issues.

https://github.com/AYColumbia/test-tooltip-app.git