Hi, i just spent a few hours debugging an issue that only happens in Firefox (i’m using Quantum), i’m posting my solution here in case anyone runs into the same issue.
For context, i’m using React with the velocity-react package
Firefox has a bug in which if the element is “display: none” then window.getComputedStyle will return null.
I noticed that twitch initially sets the style of the extension iframe as display: none, then checks if the extension is valid. Once it verifies the validity, it’ll set display: block and your extension will begin to load.
Somehow my code was run while the iframe was still display: none, which called the velocity component which called getComputedStyle, which caused my entire app to crash. In Firefox you would just see a blank extension.
SInce i’m using React 16 i was able to use their componentDidCatch method to stop my app from crashing.
I’m not sure why a single error was able to kill my entire React app, but i’m just happy it’s resolved.