"@babylonjs/inspector" is missing 5 dependencies, what am I doing wrong?

Questions
1

I’m new in BabylonJS, and following the tutorial I got this error in the console:


Error: Build failed with 5 errors:
node_modules/@babylonjs/inspector/dist/babylon.inspector.bundle.max.js:3:63: ERROR: Could not resolve "@babylonjs/materials"
node_modules/@babylonjs/inspector/dist/babylon.inspector.bundle.max.js:3:124: ERROR: Could not resolve "@babylonjs/gui"
node_modules/@babylonjs/inspector/dist/babylon.inspector.bundle.max.js:3:151: ERROR: Could not resolve "@babylonjs/gui-editor"
node_modules/@babylonjs/inspector/dist/babylon.inspector.bundle.max.js:3:185: ERROR: Could not resolve "@babylonjs/loaders"
node_modules/@babylonjs/inspector/dist/babylon.inspector.bundle.max.js:3:216: ERROR: Could not resolve "@babylonjs/serializers"

when I remove import "@babylonjs/inspector"; from the code, the error doesn’t happen again.

Here are my dependencies:


  "devDependencies": {
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  },
  "dependencies": {
    "babylonjs": "^6.20.1",
    "@babylonjs/core": "^6.20.1",
    "@babylonjs/inspector": "^6.20.1"
  }

What am I doing wrong?

2

Seems that you need to add to your imports @babylonjs/core/Debug/debugLayer

Example with Promise in TS:

3

Hey @labris, I just solved it, I was already importing the debug layer, and I tried to run the example you sent but I was still getting the same error, so I did some changes, heres the beginning of my fixed code:

import "@babylonjs/core/Debug/debugLayer";
import { Inspector } from "@babylonjs/inspector";

import { Engine, FreeCamera, HemisphericLight, Mesh, MeshBuilder, Scene, Vector3 } from '@babylonjs/core';
import './style.css';

class App {
  private canvas;
  private engine;
  private scene;

  constructor() {
    this.canvas = document.getElementById('app') as HTMLCanvasElement;
    this.engine = new Engine(this.canvas, true, {preserveDrawingBuffer: true, stencil: true});
    
    this.scene = this.generateScene();
    
    this.engine.runRenderLoop(() => {
      this.scene.render();
    });

    window.addEventListener('keydown', e => {
      if(e.key === 'F1'){
        e.preventDefault();
        Inspector.IsVisible ? Inspector.Hide() : Inspector.Show(this.scene, {});
      }
    });

Looks like the package "@babylonjs/inspector" uses the following packages:

"@babylonjs/gui"
"@babylonjs/gui-editor"
"@babylonjs/loaders"
"@babylonjs/materials"
"@babylonjs/serializers"

So I just added them to my devDependencies, and it is running now :raised_hands:t2:. Is it ok doing this way?

Now this is how my deps are:


  "devDependencies": {
    "@babylonjs/core": "^6.20.1",
    "@babylonjs/inspector": "^6.20.1",
    "@babylonjs/gui": "^6.20.1",
    "@babylonjs/gui-editor": "^6.20.1",
    "@babylonjs/loaders": "^6.20.1",
    "@babylonjs/materials": "^6.20.1",
    "@babylonjs/serializers": "^6.20.1",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  },
  "dependencies": {
    "babylonjs": "^6.20.1"
  }
4

If it works for you I see no problems :slight_smile:

2 Likes
5

Nice, thank you for the help!

1 Like