[BUG] Unable to disable style injection

[ShahwarNisar]

Hi,
I have to apply CSP standards in my React application. So, according to your docs, we have to set REACT_TOOLTIP_DISABLE_BASE_STYLES=true & REACT_TOOLTIP_DISABLE_CORE_STYLES=true to disable styles and import the CSS styles file in app.js. But apparently, after following all the steps I'm still seeing react-tooltip adding inline styles.

Can you please suggest a way how can I achieve this? You can check SS of the error.

Regards,
Shahwar

[gabrieljablonski]

Please give more details about your dev environment.

Are you running a create-react-app project or something else?
What is your bundler?

[danielbarion]

@ShahwarNisar have you seen it? #1059

Also, are you sure those environment variables are being loaded correctly?

Can you provide the information that @gabrieljablonski asked, please? and if possible, a reproducible example

[ShahwarNisar]

Hi, Thanks for the quick response really appreciate that.

@gabrieljablonski I'm using react-scripts

@danielbarion Yes I have followed both ways mentioned here (https://react-tooltip.com/docs/examples/styling#disabling-reacttooltip-css) but neither one worked for me. Also, I have tried setting values directly to the env files as well as in the build value in the package.json like:

"build": "npm run generate-meta-tag && (SET REACT_TOOLTIP_DISABLE_CORE_STYLES=true) && (SET REACT_TOOLTIP_DISABLE_BASE_STYLES=true) && (SET INLINE_RUNTIME_CHUNK=false) && react-scripts build"

Let me know/guide please if I'm doing something wrong, please.

EDIT:
removeStyle method is working (it removes styles from index.html) but still showing errors in the console while the page load compiler reads it.

[gabrieljablonski]

I believe this is happening because react-scripts only imports environment variables that start with REACT_APP_.

Bundlers like esbuild and rollup usually have a define config option which is used to "find and replace" occurrences of process.env.<variable>, and I believe react-scripts does not have something similar.

@danielbarion we might have to consider extra env variables with the REACT_APP_ prefix to support react-scripts.

[gabrieljablonski]

@ShahwarNisar We've realized using environment variables is unviable for setting config options on node packages. #1052 will offer an alternative to this issue with style injection, but it should be a few days before we have the time to get to it.

Until then, please consider using react-tooltip@v5.12.0, which is the last version before we started automatically injecting the tooltip styling. You'll be missing a few features (you can check the changelogs here), but it may be good enough for now.

[gabrieljablonski]

@ShahwarNisar please test what we're trying on #1052 with the beta version react-tooltip@5.19.0-beta.1052.0

If I understand your use-case correctly, you should do <Tooltip disableStyleInjection='core' />, and then do the import manually with import 'react-tooltip/dist/react-tooltip.css'.

Please let us know the results.

[ShahwarNisar]

@ShahwarNisar please test what we're trying on #1052 with the beta version react-tooltip@5.19.0-beta.1052.0

If I understand your use-case correctly, you should do <Tooltip disableStyleInjection='core' />, and then do the import manually with import 'react-tooltip/dist/react-tooltip.css'.

Please let us know the results.

Hey @gabrieljablonski,
I hope you're doing well. I wanted to inform you that I've tested the code with the changes you suggested, and I'm happy to report that it works perfectly! Your fix has resolved the issue we were facing, and everything is functioning as expected now.

Once again, thank you for your excellent work!

Best regards,
Shahwar

[gabrieljablonski]

That's great to hear.

I suggest upgrading to the official release react-tooltip@5.19.0