Firefox: InvalidAccessError when checking if stylesheet has been imported

After having tweaked my build system I get an error in Firefox only: “InvalidAccessError: A parameter or an operation is not supported by the underlying object”.

The error is related to react-utils.js line 99:

var styleSheet = document.styleSheets[i];
var CSSRulesList = styleSheet.rules || styleSheet.cssRules;

Trying to access styleSheet.cssRules makes Firefox crash; uncommenting this line (and the next ones) fixes the problem.

The error is probably rare, because it’s all about timing, e.g. if you set a breakpoint at the mentioned line you won’t get the error. So it only happens if you load a chart as one of the first things of your app. In my case the app is just being build…

So it’s probably more of an edge case. However, the code in question only tries to warn the user.

[texttechne]

To be honest I would just remove the check / warning, because you cannot reliably determine from JS if the user just forgot to include styles:

• As mentioned in this issue, there are circumstances where the test itself will fail
• then there are use cases of custom style imports #683
• or even completely custom styling

Do you have so much pain with users that don’t realize that they’ve missed to include the css?

[mcnuttandrew]

Well that’s no good. I would support an additional PR that marks the check unnessecary via localstorage or a prop on XYPlot called noStylesheetCheck that disables the check if that floats your boat