Inspector and ES6 requires webpack

Bugs
1

I’ve been experimenting with using ES6 modules with my babylonjs application, and discovered that if you include the inspector, it only works when you use webpack to package the application.

If instead you use something like es-dev-server to serve up the modules in a development environment, you get an error:

universalModuleDefinition:9 Uncaught TypeError: Cannot read property 'GUI' of undefined
    at webpackUniversalModuleDefinition (universalModuleDefinition:9)
    at universalModuleDefinition:10

All you need to do to recreate the bug is something as simple as:

import { Engine } from "@babylonjs/core/Engine/engine";
import { Scene } from "@babylonjs/core/scene";
import { Color3, Color4, MeshBuilder, DirectionalLight } from '@babylonjs/core';
import { Vector3 } from '@babylonjs/core/Maths/math';
import "@babylonjs/core/Meshes/meshBuilder";
import "@babylonjs/inspector"; // this is the line which causes problems, even if we don't use it.
let engine = new Engine(c,true);
let scene = new Scene(engine);
scene.clearColor = new Color4(0.02, 0.02, 0.02, 1);
scene.blockMaterialDirtyMechanism = true;
let VRHelper = scene.createDefaultVRExperience({ rayLength: 1000, laserToggle: false, useMultiview: false });
VRHelper.enableInteractions();
    scene.activeCamera.maxZ = 1E8;
    VRHelper.onAfterEnteringVRObservable.add(() => {
        scene.activeCamera.maxZ = 1E8;
        VRHelper.changeLaserColor(new Color3(0.5, 0.1, 0.1));
    });
    var light = new DirectionalLight("DirectionalLight", new Vector3(0, -1, 0), scene);
    light.diffuse = new Color3(1, 0, 0);
    light.specular = new Color3(0, 1, 0);
    var sphere = MeshBuilder.CreateSphere("sphere", {}, scene);
engine.runRenderLoop(function() {
    scene.render();
});

If you remove the reference to the inspector, all is fine.
Adding in a reference to the GUI module doesn’t seem to help.

2

Pinging @sebavan

3

yup inspector in es6 is not an es module per se but a UMD one. I am not sure it would be possible to run it with es-dev-server could you share a github project with the repro and we could try to have a look ?

4

Thanks. I will set something up in github and let you know when done. BTW, I’m not wedded to es-dev-server per se, I just don’t want to have to use webpack with es6 modules just so the inspector works.

5

GitHub - bilkusg/babylones6inspectorbug: Repo to demonstrate problem with babylonjs inspector es6 without webpack now created

npm install followed by npm run start will fail with the error described above
commenting the reference to the inspector out of index.js and it then works.

Let me know if you need anything more

6

Try to expose BABYLON to window before import the inspector.

import * as BABYLON from '@babylonjs/core';
window["BABYLON"] = {...BABYLON};
import("@babylonjs/inspector");
3 Likes