OK I am giving up. I can’t get the current BJS code running locally. IDK what’s the issue here and don’t have time to play with it. So use the legacy approach or set the NormalMaterial manually 
if you wanna be cool you can hook a listener to the toggle button and change the material according to it’s value… I am sure I will have another look at this later because I don’t like leaving things unfinished 
All good. Thanks for looking into it at all!
That’s a good idea.
Maybe if I have some free time at some point I might look into the actual BJS code myself and file a Bug report, or PR if I figure something out, on GitHub.
Thanks again man!
1 Like
Glad to help dude! However I have a final solution. You have to import the whole legacy package to make it working:
import '@babylonjs/core/Legacy/legacy';
Example:
import { CreateSceneClass } from '../createScene'; // just a helper
import '@babylonjs/core/Debug/debugLayer';
import '@babylonjs/inspector';
import '@babylonjs/core/Legacy/legacy';
import { ArcRotateCamera, Engine, HemisphericLight, MeshBuilder, Scene, Vector3 } from '@babylonjs/core';
export class DefaultSceneWithTexture implements CreateSceneClass {
createScene = async (engine: Engine, canvas: HTMLCanvasElement): Promise<Scene> => {
const scene = new Scene(engine);
const camera = new ArcRotateCamera('my first camera', -1.2, Math.PI / 3, 10, new Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene);
light.intensity = 0.7;
const sphere = MeshBuilder.CreateSphere('sphere', { diameter: 1, segments: 32 }, scene);
sphere.position.y = 1;
await scene.debugLayer.show({
overlay: true,
});
scene.debugLayer.select(sphere, 'DEBUG');
return scene;
};
}
export default new DefaultSceneWithTexture();
package.json
"dependencies": {
"@babylonjs/core": "^5.0.0-beta",
"@babylonjs/loaders": "^5.0.0-beta",
"@babylonjs/materials": "^5.0.0-beta",
"@babylonjs/inspector": "^5.0.0-beta", // or to devDependcies
result
Maybe it’s a good idea to import the whole legacy package dynamically only when you need the Inspector. If you want to know why have a look at the source code of the Inspector. It relies on the legacy stuff. Even if you set your material to NormalMaterial and turn on the Display normals it will dispose the active material, inject and UDM package (materials) and set a new one from that UDM package. I am far not a package expert but maybe the Inspector could introduce a solution without the need to import the legacy package in your project.
5 Likes
Oh, Awesome! Thanks man! Thanks to using a bundler, I should be able to dynamically import it based on if I’m in the development environment (I think, I’ll give it a try).
Yeah I’m not a package expert either, but I have used a LOT of packages in my time and, though I know that the Inspector is generally only intended to be used in development and not in production, I would have expected that the NPM package versions of these would include all of the dependancies that the module requires to function and not rely on externally fetching other code or including legacy (non tree-shakable) dependancies. Especially if you want to be able to develop offline.
2 Likes
@RaananW might help with the packaging issue as I guess here a dependency is missing for the feature to work well in the inspector ?
The dependencies are set correctly, but are fixed on a specific version. It’s also defined as a dependency and not a peer dependency (which is something we will need to solve in the future), so any version of the core babylonjs package (for example) that is not exactly the same version as defined there will technically be installed twice. I rpomise - we are already working on solving those issues 
About the inspector and not needing the legacy support - the only reason legacy support is needed is because the inspector is using the BABYLON namespace under the hood to get started. Can I ask you to try something?
Instead of using scene.debugLayer.show, can you try doing that:
// other imports that you are using
import { Inspector } from "@dev/inspector";
// do your magic... make sure to create a working scene :-)
// when you need the inspector:
Inspector.Show(scene, {});
Does that work without importing from legacy?
1 Like
Glad to hear that these things are being worked on! 
Assuming you meant the following import, no that still does not seem to work without also including the legacy import 
import { Inspector } from "@babylonjs/inspector";
1 Like
yes, this is what I meant, sorry
I’ll check that! this should work correctly.
Just to be sure - do you have the same version of core, gui, and inspector installed?
Yeah I do, I even double checked my package-lock.json just to be sure
Still get the same error:
Looking in the network inspector I can see that it is still trying to load the materials from https://preview.babylonjs.com:
I had a little look into the Inspector node_modules code (babylon.inspector.bundle.max.js) and, unless I’m reading it wrong (which is a high possibility), found that it still tries to use the BABYLON namespace. I think I traced it back to this section of the source code:
yes! good catch.
I’ll address this issue soon (planning to do that before 5.0.0 stable is released). Until then, if you want to avoid this issue, you can do something like this:
import { NormalMaterial } from "@babylon/materials";
(window as any).BABYLON = { NormalMaterial };
I know it is not a proper solution, but that would prevent the inspector from downloading the unneeded package.
3 Likes
Awesome! Thank you.
Just FYI it looked like there are a few places in various supporting modules (Inspector, GUI, etc.) that still reference the BABYLON namespace and/or externally loaded scripts as well.
Thanks
We are planning on removing them all, but it will take some time.
2 Likes