How to use Inspector with ES6 Modules

Questions
#1

Hiya,
BJS works great with es-dev-server to handle the bare import modules. But now that I want to use the inspector, not so much.

Importing the following as per the docs causes a runtime error:

import “@babylonjs/core/Debug/debugLayer”;
import “@babylonjs/inspector”;

It errors on a function called “webpackUniversalModuleDefinition”. The variable “exports” evaluates to undefined, which causes the else condition to try to get Babylon features from root[“BABYLON”] which, because I’m using ES6 modules, the root variable BABYLON doesn’t exist.

Am I missing something, or is webpack just required for this to function?

Maybe memory leak in inspector?
#2

I’m not the most competent to help you with that but maybe @RaananW can figure it out?

#3

Interesting, the es6 modules should not include webpack definitions of any kind.

Will need to check why the inspector is an exception. Just o make sure, what version are you using?

#4

The package.json for @babylon/inspector lists 4.0.3. I just went through some of the other non-core packages, and the inspector seems to be the only one bundled. It gives a Typescript file and a bundled one (babylon.inspector.bundle.max.js). All of the other packages contain the Typescript source, and a non-bundled ES6 module JS output

#5

Yes, the build process of the inspector is using webpack to pack the es6 module.
I’ll check with the team internally why, there must be a good reason for that. Will keep you updated here

1 Like
#6

Thanks! And if that’s just the way things are, I’d love to hear about any thoughts on working around it. I know when I’ve asked about modules previously, your team says they are using something like es-dev-server internally, so I imagine it might be a problem you’ve had internally as well

#7

There should not be any difference with other modules. So probably a mistake. @RaananW can you check what is wrong?

#8

The inspector ES6 version is still built using webpack and is, in general, UMD-enabled.

I ran a few experiments and it seems like we will need to make a few (small) modifications in the code and change the build process (and the declared dependencies) to fix that.

#9

Ok let’s wait for 4.2 then (also pinging @sebavan for awareness)

#10

Thanks all! Looking forward to the change!

1 Like
#11

You should be able to insert it in a normal script tag in your page as long as you rely on the es6 bundled version. This is actually what we do when developing locally.

#12

Yeah, unfortunately, I’m kinda curmudgeonly in regards to bundling during dev. I’m using straight up ES6 modules when I’m building something, and this is when the inspector matters to me the most. I’d honestly rather wait for 4.2 rather than changing my process to accommodate. Thanks tho!

#13

Yup and that is exactly how we work locally without bundling, we straight use the es6 inspector in the page

#14

Oh, huh - for some reason I got the impression that you couldn’t mix non-bundled Babylon with the bundled inspector, so I didn’t even try. I’d have assumed that since the BABYLON window var didn’t exist, it wouldn’t work out for the inspector. Guess I need to give it a shot!

#15

@bengfarrell not sure if this helps, but take a look at how I’m doing it here Virtual Realms / Awesome Babylon Starter · GitLab

Using TS + Babylon.js ES6 modules, including inspector ES6 module only for local dev and automatically excluded from production builds via webpack string replace loader.

#16

Hey Brian! Looks great! And, hehe, my question comes from a similar place. I TOO HAVE A STARTER KIT :slight_smile: Mine is pure JS and needs no front end building/bundling. Yours, again looks great - but if you’re using TS and Webpack, doesn’t really help my use case (at least in terms of what I understand). Thanks for chiming in, though!

Inspector's tools: n.Color3 is not a constructor