Cannot read properties of null (reading 'enable') - When hardware acceleration is disabled

[Mayank-Sh07]

[szilarddoro]

I encountered the same issue when I disabled WebGL. You can wrap your component in an ErrorBoundary and provide a fallback (e.g., a static globe image).

[Kinbaum]

I have a strange behavior that I've noticed with this library and I'm wondering if either of you or if @shuding can help resolve this. When hardware acceleration is disabled, I run into this error as well. In order to fix that, I introduced a little logic to check if webgl is supported:

useEffect(() => {
  try {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('webgl') || canvas.getContext('experimental-webgl') as WebGLRenderingContext;
  
      context.getSupportedExtensions();
  }
  catch (err) {
      setIsWebGlSupported(false);
      console.log('WebGL not supported, hiding globe animation...');
  }
  }, []);

I then conditionally render the globe based on isWebGlSupported
I'm using an M2 mac with macOS 13.5 and I tested this in Chrome and Edge and the logic check I have behaves as I would expect.

Now I've have seen an issue with this on a colleague's machine where they've disabled hardware acceleration, but instead of context.getSupportedExtensions() throwing an error, it returns a value.

The globe itself then renders completely black.

I was able to replicate the behavior in saucelabs.
Heres's a screenshot from https://upstash.com which also uses this lib.