Is the inspector bundle broken?

[fenomas]

When I invoke "scene.debugLayer.show()", using the current nightly BJS builds, as soon as the inspector bundle loads and runs I get an error like:

Exception: ReferenceError: __extends is not defined at 
http://www.babylonjs.com/babylon.inspector.bundle.js:408:12893 at INSPECTOR 
(http://www.babylonjs.com/babylon.inspector.bundle.js:408:13544) at Object.<anonymous> 
(http://www.babylonjs.com/babylon.inspector.bundle.js:408:13575) at __webpack_require__ 
(http://www.babylonjs.com/babylon.inspector.bundle.js:21:30) at Object.<anonymous> 
(http://www.babylonjs.com/babylon.inspector.bundle.js:49:19) at __webpack_require__ 
(http://www.babylonjs.com/babylon.inspector.bundle.js:21:30) at 
http://www.babylonjs.com/babylon.inspector.bundle.js:41:18 at 
http://www.babylonjs.com/babylon.inspector.bundle.js:44:10

If I grab the inspector bundle file out of the github "/dist" folder and src it in my html locally I get the same error.

Am I missing something?

Edit: tagging @Temechon 

[Temechon]

Hi fenomas, 

I can't reproduce in my local fork... However, I compiled a new version, it's ready here: https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview release/inspector

Can you try with this one ? Let me know if that doesn't work.

Thanks !

[fenomas]

@Temechon

Gah. I think I know what's going on but I don't have a typescript environment set up to confirm, and it's really hairy to track down.

I *think* what's happening is: __extends, and some other helper functions, are defined in boilerplate that's used by typescript projects, and when people use webpack to bundle several typescript projects together they use some kind of configuration that prevents the boilerplate from being defined more than once.

In your case, when you build a project that requires in the inspector bundle as a dependency, your root project is probably typescript, so the boilerplate gets included at the beginning somewhere. In my case, my base project is plain Javascript, and I pull in both Babylon and the Inspector bundle as dependencies. The Babylon bundle includes the __require boilerplate, but the root project and the inspector bundle don't - so the inspector bundle throws.

If I open up my Babylon bundle hack in the line: window.__extends = __extends somewhere appropriate, then the inspector bundle now finds the helper function and the bug goes away.

I don't know what the ideal fix is here - I don't know how typescript is meant to be bundled and the whole thing is making my head hurt. It might be simplest to just change the inspector's bundle config to include the boilerplate - it's not that much file size, and production code shouldn't need to load the inspector anyway.

 

With all that said, now that the code runs, trying to use popup mode still throws:

scene.debugLayer.show({ popup: true })

Exception: 
TypeError: Cannot read property 'document' of null at t.openPopup 
(http://www.babylonjs.com/babylon.inspector.bundle.js:408:4811) at new t 
(http://www.babylonjs.com/babylon.inspector.bundle.js:408:315) at DebugLayer._createInspector 
(webpack:///./src/external/babylon.js?:61456:35) at HTMLScriptElement.script.onload 
(webpack:///./src/external/babylon.js?:6478:21)

I don't know if that's related to the packing setup or not.

 

All this effort to get an FPS meter  

[Hersir]

I have the same error.

[Hersir]

Could be related to this https://www.npmjs.com/package/typescript-extends

[Hersir]

@Temechon I tried to add __extend manually to webpack but looks like it will not help for loaded files. (https://webpack.js.org/guides/shimming/, https://www.npmjs.com/package/typescript-extends)

[fenomas]

@Temechon

Did you ever get a chance to look at this? The inspector layer is still broken for anyone building JS projects with bundlers like webpack.

To recap the problem: the inspector bundle calls a function called "__extends" which isn't defined anywhere in the bundle. The babylon library bundles (babylon.max.js, etc.) define "__extends" as a local variable, so if you load them directly into the HTML page they pollute global scope with the __extends function, and the inspector doesn't break. However if you require in Babylon.js from a bundler, the Babylon code runs inside a closure, global scope doesn't get polluted, and the inspector code crashes trying to call undefined().

To recap the fix: I believe it has to do with how the inspector bundle is compiled. There should be a typescript flag that sets whether or not to include typescript boilerplate (including __extends) into the bundle.

[Temechon]

Hi @fenomas,  I don't use babylonjs with npm, so I can't reproduce your issue. 
I bundled the 'extends' functions in the inspector itself as you told me to, can you see if that fixes your problem ? It's on my fork : https://github.com/Temechon/Babylon.js/blob/master/dist/preview release/inspector/babylon.inspector.bundle.js (not merged yet with the main repo, I want your confirmation first).  Erf didn't update my fork first :/ I'll be back in few minutes!

Should be good now : https://github.com/Temechon/Babylon.js/blob/master/dist/preview release/inspector/babylon.inspector.bundle.js

Thank you man !

[fenomas]

Hey, sorry for the late reply @Temechon, but I tried this out and it seems to work.

Thanks!