Importing inspector in typescript cause failure if engine started with offscreen canvas

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 :wink: If you want us to do the work we will need a repro :frowning:

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