WebGL context cannot be created

[rohan-deshpande]

Bug Report

Note I'm using v1.10.0 because I kept getting #240
My react-scripts is v2.1.8

Current Behavior
THREE.WebGLRenderer: Error creating WebGL context.

Reproducible demo
here

Expected behavior/code
react-snap should build the static site without error

Possible Solution
Use react-snapshot which works without error, but it isn't really supported anymore it seems.

Additional context/Screenshots

  / log: THREE.WebGLRenderer
✏️  / log: THREE.WebGLRenderer: Error creating WebGL context.
function) [as next] (http://localhost:45678/static/js/2.a2538651.chunk.js: Error: only absolute urls are supported
🔥  / pageerror: Error: TypeError: Cannot read property 'getShaderPrecisionFormat' of null

[stereobooster]

I guess there is an issue with puppeteer and headless chrome. Maybe this one https://stackoverflow.com/a/48063721/1190041?

[rohan-deshpande]

Hmm, okay! Thanks for the link. What a shame, maybe that is fixed in a later version (since I'm using 1.10.0, but I can't upgrade because of #240 - Are there any reasons why you think that might be happening?

[stereobooster]

I have not much insights than this. You may post issue in puppeteer repo

[rohan-deshpande]

I'm wondering if I can use some sort of environment variable to stop it from entering the WebGL codepath when running postbuild because really, I don't need it to attempt to try to do this when snapshotting. As long as when the site is accessed and the WebGL context can be created, things should be fine.

[stereobooster]

navigator.userAgent === 'ReactSnap' may help

[rohan-deshpande]

This did the trick! Thanks very much. Not sure if the bug should be closed because the error still happens, but maybe it's a Puppeteer issue. Might be handy to document it in the README perhaps?