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.