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

[gabrieljablonski]

Discussed in #1184

Check the discussion for more info.

[tonyco97]

Hi any news?

[gabrieljablonski]

Sorry, haven't had the time yet to investigate this further.

[gabrieljablonski]

Sorry for the delay on getting back to this.

@AYColumbia I tried reproducing the warning with the repo you provided here, but it doesn't happen for me, and the tooltip works normally.

Could you provide some more info on this? I'll be able to follow up more promptly now.

---

@tonyco97 can you provide some info on how you've experienced this issue? Can you try cloning @AYColumbia's repo and seeing if it happens there for you as well?

Here's the repo: https://github.com/AYColumbia/test-tooltip-app

Running npm install followed by npm run startwp should get you there.

[Ti-tanium]

Any solutions to resolve this?

I'm having the same issue with react-tooltip@5.27.0.

My project is using react-tooltip, and I have another package that's also using react-tooltip. And I think both of them are trying to inject the react-tooltip base and core style into the html, which causes this warning in console.

I'm seeing 1000+ of them in my console, which is really annoying. Any suggestions?

[gabrieljablonski]

@Ti-tanium try using disableStyleInjection='core' (details here) on the tooltip on your main project. Since you have another package using the tooltip, the styles should still be applied.

[Ti-tanium]

@Ti-tanium try using disableStyleInjection='core' (details here) on the tooltip on your main project. Since you have another package using the tooltip, the styles should still be applied.

Is there a way to disable the injection globally for react-tooltip? Adding the disableStyleInjection for every tooltip is very annoying. Since I might have hundreds of them.

[Ti-tanium]

Why do we need this warning? If the style is already injected, why not just skip the injection without giving any warning? Also the check for production if statement is not really working for me (we are probably using prod as the env variable), I'm seeing thousands of warnings in production as well

[gabrieljablonski]

Is there a way to disable the injection globally for react-tooltip?

There's a way described on the docs with environment variables, but that's deprecated. I suggest writing a simple wrapper that sets disableStyleInjection, and just passes through all other tooltip props. Then, you just update the imports from react-tooltip to use your wrapper instead.

Why do we need this warning? If the style is already injected, why not just skip the injection without giving any warning?

We use that as a warning we might be doing something wrong with style injection. We might need to revise the logic, since we hadn't considered your use case, in which you use a package that also uses the tooltip internally.

Also the check for production if statement is not really working for me (we are probably using prod as the env variable)

As you can see on the code, we only check for the production value.

[AYColumbia]

Sorry for the delay on getting back to this.

@AYColumbia I tried reproducing the warning with the repo you provided here, but it doesn't happen for me, and the tooltip works normally.
...
Could you provide some more info on this? I'll be able to follow up more promptly now.

Hi, I tried some different adjustments the test project but have been unable to reproduce as well. It does still happen with my actual project though so will have to read through the new posts and see if there's anything else I can try. The only thing I can think of is that I may have missed a package that's also loading tooltip that is in my actual project but NOT in the test project. I tried to run that down but haven't found anything yet.

[tonyco97]

Sorry for the delay on getting back to this.

@AYColumbia I tried reproducing the warning with the repo you provided here, but it doesn't happen for me, and the tooltip works normally.

Could you provide some more info on this? I'll be able to follow up more promptly now.

@tonyco97 can you provide some info on how you've experienced this issue? Can you try cloning @AYColumbia's repo and seeing if it happens there for you as well?

Here's the repo: https://github.com/AYColumbia/test-tooltip-app

Running npm install followed by npm run startwp should get you there.

I' ve tried test-tooltip-app and the error does not appear here. In my case, i've a page with react-tooltip which imports a component also containing react tooltip.

I've also tried to use disableStyleInjection but it doesn't work

[AYColumbia]

I updated my project with multiple components that use react-tooltip and still can't duplicate the issue. It's bewildering.

[tonyco97]

I updated my project with multiple components that use react-tooltip and still can't duplicate the issue. It's bewildering.

Try to apply some style to both tooltip in both project, one in your project and the in other one in the component that you import in the first one

[gabrieljablonski]

We might just remove the warning, since it doesn't seem to help much here.

@tonyco97 please try the beta release react-tooltip@5.27.0-beta.1203.rc.0

The warning should be completely gone with that version.

If we merge it, I'll let you know when we push an official release, and close this issue.