Inspector uncaught DOM Exception when popping out

Bugs
#1

Running @babylonjs/core version 4.0.3.

Running webpack version 4.29.6.

Followed the instructions on ES6 - Babylon.js Documentation to get the inspector running on my ES6 webpack dev server build. Everything works fine so long as the inspector is embedded in the scene. As soon as i try to pop it out, i get the following error and although the pop-out window is created, it is empty(on chrome):

Uncaught DOMException: Failed to read the ‘cssRules’ property from ‘CSSStyleSheet’: Cannot access rules.

On firefox, the popout window is also empty, and the error is just that an insecure operation was attempted.

#2

Hey and welcome!

can you repro the issue somewhere?

#3

Just figured out how to reproduce it on a smaller scale. Seems to be if there is a link to an external CSS file. Or maybe just a particular one. It won’t let me upload an attachment, but i have a small sample project. Where would be a good place to upload it?

#4

github or a zip in any kind of online storage would do :slight_smile:

#5

anywhere that is publicly visible. I do not repro in the playground so this has to be related to your setup

#6


Pretty standard webpack/ES6/BabylonJS setup.

Went ahead and built out the bundle.js into the dist so you can just run npm start.
If you prefer, npm install, then npm run build, then npm start.

The key line is the stylesheet import in the head of the index.html. If i remove that line, it does not break on popping out the debug panel.

#7

Hi! Maybe something interesting: javascript - How to launch html using Chrome at "--allow-file-access-from-files" mode? - Stack Overflow

I got there… via here: javascript - Cannot access cssRules from local css file in Chrome 64 - Stack Overflow

And I got there… via here: chrome "Failed to read the ‘cssRules’ property from ‘CSSStyleSheet’" - Google Search :slight_smile:

#8

yup; saw all of that, it didnt really seem to apply though, for the following reasons:

  • my error also pops up on firefox
  • the error goes away when removing the external css file, rather than anything to do with local files
#9

As @Wingnut suggested it is well a CORS issue but not in Babylon. Your page in the demo uses

This means none of the stylesheet would be accessible by cors due to the different request type + origin.

If you comment out your external css it will just work normally. The think is we need this copy to inject the current style in the new page at the moment. Could you not embed them in your app ?

I will in the meantime see if we could add a fallback for it.

https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface

1 Like
#10

Yup, i fixed it by embedding the external CSS into the app. Much appreciated. Super low priority bug. Fallback or maybe even a message to the user that they cannot use this feature without removing all external CSS links?