"WebGL is not supported" after switching from Electron Forge React

[sebastianvitterso]

Describe the bug

I'm currently in the process of transitioning from the template from Electron Forge, React with Typescript, to using Electron Vite, as I've grown to like Vite better than Webpack.

A lot of config has been changed, but now it works - with one notable exception:

In my project, we use plotly.js (and therefore also react-plotly.js), which uses webgl under the hood. That worked perfectly before I made the switch, but for some reason, it now just shows me the blue message WebGL is not supported by your browser - visit https://get.webgl.org for mor info above the empty plot.

I have opened the url in the electron application, using location = 'https://get.webgl.org', and it works there, so I know the warning isn't shown because the webgl-api is unavailable.

I've also tested the following in the console, which seems to show that the webgl api exists and works as expected.

The message is created by plotly.js (source), but I can't seem to see what has changed, causing it to show this message.

Electron-Vite Version

1.0.25

Electron Version

24.6.2

Vite Version

4.4.2

Plotly Versions

// package.json
"@types/plotly.js": "^2.12.24",
"@types/react-plotly.js": "^2.6.0",
"plotly.js": "^2.24.3",
"react-plotly.js": "^2.6.0",

Validations

• Follow the Code of Conduct.
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[sebastianvitterso]

Turns out, electron-vite wasn't the issue. My CSP was changed from "allow anything" to an explicit whitelisting, and for some reason plotly.js (the default version) used unsafe evals to initialize, so without a CSP containing script-src 'self' 'unsafe-eval';, it wasn't possible to run it. I remedied the problem by instead using plotly.js-strict-dist-min, as recommended here

This is the post that got me on the right track, btw.