Issue using Inspector with deno

Bugs
1

Hello everyone,

I am currently making a npm module that I can import in all my projects to avoid copy/pasting the code I reuse often between them.

For that I chose to try deno for the development phase and package bundling, just to see if it can be a good alternative to node/webpack.

Here is the problem :

I have a main.ts file importing utility functions from a src/utils.ts file. It is working great, with @babylonjs/core imports.

Now I want to have a function adding a keyUp callback to toggle the inspector whenever I want in my projects.
I am importing the inspector with deno and using it in by function :

import { Inspector } from "npm:@babylonjs/inspector";

export function addInspectorCallback(scene: Scene) {
  scene.onKeyboardObservable.add((e) => {
    if (e.event.code === "KeyI") {
      if (scene.debugLayer.isVisible()) {
        Inspector.Hide();
      } else {
        Inspector.Show(scene, { embedMode: true });
      }
    }
  });
}

Although there is no error highlighted by VSCode, there is one when I try to build the project :

error: Uncaught SyntaxError: The requested module 'npm:@babylonjs/inspector' does not provide an export named 'Inspector'
import { Inspector } from "npm:@babylonjs/inspector";

I usually have no problem using the inspector with node/npm so I guess it has something to do with the way deno resolves things.

Here is a Github repo to reproduce the problem : GitHub - 3D-Bear/babylonjs-deno-inspector-import-issue
Does someone have any experience with deno and Babylon.js ?
Thank you for any help :pray:

2

good question for our master of mystical arts: @RaananW

3

Deno supports only es6 modules but our inspector is a UMD module. I wonder if JSPM could do ? but I guess it would try to load its own version of core and such :slight_smile:

4

I wonder - what do you get if you import the entire namespace? i.e. something like this:

import * as Inspector from "npm:@babylonjs/inspector";
console.log(Inspector);

Is the full namespace populated, or empty?

5

When modifying the import syntax as @RaananW suggested, I get type errors further in the code when I call Inspector.Hide() and Inspector.Show() (property doesn’t exist).

I cannot get a result for console.log(Inspector); because the import seems to block the whole build operation (Even a console.log('hello world') at the very beginning of main.ts is not executed, and debugger never hooks to the code. Everything goes as expected when I remove the code linked to Inspector)

However VSCode indicates the type as (alias) module "@babylonjs/inspector"

With the first syntax VSCode indicates the Inspector type as "(alias) class Inspector" (which seems to be right, but fails at build time).

I will try some things involving UMD and JSPM as @sebavan suggested, but I’m not really in my comfort zone :rofl:

6

Another thing I wonder (if I may :-)) is - what happens when you simply import "npm:@babylonjs/inspector";. My guess is that the global namespace will be populated with the Inspector namespace. However, I am not sure this will work, as the babylon object doesn’t exist on the global namespace.

The inspector is not esm friendly, and we are aware of that. If you don’t have any way of using commonjs or AMD in your environment (i am not 100% sure if deno supports it) it will probably not be easy to integrate it, unless you only use UMD.

7

I tried this syntax too and it results in the build being stuck and zero logs in the console. I am not really sure of what it means though.

I did some research about deno and UMD and it seems that those two are not really meant to be together :slightly_frowning_face: There may be a way of wrapping UMD packages to make them fit but I don’t know how for now.

After some other testing, I moved back to node/yarn for convenience. If I make progress some day on the deno case I will update this topic.

Thank you for your help anyway, this community still is the best !

1 Like
8

Oh Deno…

That’s also partly on us TBH. The inspector package is still bundled and released as a wrapped UMD package, even in es6 world. We should put that on our TODO list as a team to release the package in a cleaner, esm-friendly way.

1 Like