Unable to use react-apexcharts with the template

[imyosh]

Please provide the following information:

Operating system: ubuntu 23 Version of the template: v22

MVP: simply by installing react-apexcharts and importing/using one of the charts in the renderer process

Error message:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-jSijahJoqaar+eujhthsIA=='". Either the 'unsafe-inline' keyword, a hash ('sha256-0LPZoaUlRg6skhVDAsOXJDYd0QywFnns8TclTlStHUs='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

What I've tried :

• Adding 'unsafe-inline' does not solve the issue
• I tried the solutions suggested in similar issue ( the styled component and material-ui ) but does not solve this one.

how react-apexcharts works is kinda similar to material-ui as it injects style tag to the header

currently the only way to get through this is by removing the whole CspHtmlWebpackPlugin, which defeat the purpose of the template

Any help will be appreciated

[reZach]

Do you have a sample git repo that reproduces the issue @imyosh ? That would be helpful in debugging and validating a fix is successful when made. I would have thought adding "unsafe-inline" too would fix the issue, but perhaps there is more integration with the react-apexcharts library needs to be made in order to work with this template.