I’m attempting to add offscreen canvas, with fall back support to regular canvas to our babylon project. and one issue i have found is that just importing the npm typescript inspector will fail (as it tries to use document for the colour picker) even without trying to show the insepector.
import '@babylonjs/inspector'
I can understand if the inspector won’t be available if running on offscreen canvas, but is it possible to at least not have it crash the entire project if its loaded at the same time?
Sure thing, do you mind submitting a PR for that? I guess we can probably check if document exists in the color picker code
Did you mean a github issue, rather than a PR - as i’ve not tried to actively fix the issue - still got a host of other fun things to work out (web audio being the fun one with workers, as i have to post message back and forward).
No I meant PR 
If you want us to do the work we will need a repro 
i’ll have a look and see if its a quick fix for a pr - otherwise i’ll create the repro and make an issue. (as it could be just that colour picker is the first to use document)
so, i’ve had a quick look - the issue seems to be in the ‘style-loader’ webpack module used to inject css.
I can probably make a simple repro project for this, but not sure how easily this can be rectified by you guys, rather than needing to parse the issue up the chain.
i have created the following repro repo - is this sufficient to create an issue for the error?
Thanks,
rdpeake
Can you point me where in the style loader code? I can try to quickly add a document existence test for you
the line that throws the error is this one: style-loader/injectStylesIntoStyleTag.js at master · webpack-contrib/style-loader · GitHub
However i ended up working around all the document calls in that file just to see if it would get it around ‘failing to load’ - i edited my local version of @babylonjs/inspector js file just to get it working - but that isn’t really a viable solution long term as i’d have to use a auto-patcher for others in my team to get it to work.
How did you unpdate your inspector.js file?
The problem I’m seeing is that style-loader is a webpack plugin and we do not control it
yeah, that was what i was thinking as well when i sent the first message. i just edited the file in node modules (thankfully it isn’t minified) - if i wanted to have that persisted i would need to use one of the patching npm modules.
I’m not sure if there is a way to alter how the colour picker works to prevent style loader from kicking in, but it could happen on more than just that component. at which point the solution probably needs to be that you do something other than import '@babylonjs/inspector' so that selective loading is possible.
1 Like
So, after having updated, i am still finding this to be an issue. i was again able to find a workaround via patching upstream files. the reproduction i listed above is now updated.
The intention is to be able to have the inspector code loaded, but only show it when the code is not running in a worker.
I have also opened a discussion with webpack, please weigh in here: Webworker and style loader - causing load issues with babylon js inspector · Discussion #15918 · webpack/webpack · GitHub if you have any points to add, they didn’t understand my initial post it seems.
@RaananW might be able to help on the discussion too once he’s back from vacation
Oh, a babylon mention on the webpack discussion board! 
I’ll assign myself and try understanding this later.
1 Like
So the main issue is that style-loader is calling document functions, whereas document doesn’t exist. These calls are injected by us and not by your webpack configuration, so it has little to do with your webpack config. There is also little to nothing you can do on your webpack configuration to avoid this. The inspector package cannot run on an offline canvas. we might need to document that properly, but adding the inspector in that case will fail and not work correctly.
Also wanted to add - that it really depends where you load the inspector package. defer-loading it (i.e. using the promise-based import("@babylonjs/inspector").then...) would probably solve this issue, but in a different way.
I’m not expecting the inspector to run in the offline canvas - the issue is i cannot seem to have it imported at all without the document errors caused by style loader. the reproduction repo even has code that is checking if it is running in a worker before trying to open the inspector.
Not sure how the promise based import would work as style-loader would still try to load onto the dom before the promise returns?
the style loader (again, integrated in our package, not your webpack), will only execute when the file is loaded. so I would check before importing the inspector if it is in the main thread.