Getting blank Node Material Editor when opening NME from Scene Explorer

When viewing a node material in the Scene Explorer, I get a blank popup. Ie, if I select the node material and open the Configuration tab in the Inspector, I get a button to open the Node Material Editor. This opens a window and I get a javascript error in the console: TypeError: s.Observable is not a constructor.
I am importing the following npm packages:
@babylonjs/core”: “^4.2.0”,
@babylonjs/gui”: “^4.2.0”,
@babylonjs/inspector”: “^4.2.0”,
@babylonjs/loaders”: “^4.2.0”,
@babylonjs/materials”: “^4.2.0”,
@babylonjs/serializers”: “^4.2.0”

Am I potentially missing a package?

Thanks.

pinging @sebavan

Hello, nope you should have all the required packages. Could you share a repro ? would help a lot with troubleshooting.

Having this too now while trying to upgrade to 4.2. I’m using ES6 modules extensively (as far as it goes), the inspector is toggled like this:


        Promise.all([
            import('@babylonjs/core/Debug/debugLayer'),
            import('@babylonjs/inspector')
        ]).then(_values => scene.debugLayer.show({
            handleResize: true,
            overlay: true,
            globalRoot: document.getElementById('#root') || undefined
        });
);

I have honestly no idea why Observable wouldn’t be there. Looking into s object, it only contains Inspector and NodeEditor, I could assume it’s the BABYLON object, which is still pretty empty, but I can’t find the place where Observable is assigned to BABYLON.

The exception happens in globalState.ts, while initializing onSelectionChangedObservable, which again makes little sense, since Observable is imported in that file and also

@sebavan Any clue where I could look?

It seems I can make it work by adding import('@babylonjs/core/Legacy/legacy') to the list in Promise.all, however I’d assume that’d be loading quite a lot of code. My current suspicion is that babylon.nodeEditor.js which is fetched from the CDN expects BABYLON namespace to exist, which in case of ES6 modules doesn’t. Therefore I’d need a method to invoke nodeEditor loaded from modules, which also might mean I’d have to monkey-patch the inspector…

Ohhhhhhh sounds more than possible would you mind creating a tiny github repro ???

We could then all look into it but your analysis about the node editor makes a lot of sense as it should normally be using the ex6 version of the editor but I am not sure we can do that easily so far.

Can’t give you a repo yet, but I’ve had another successful workaround with the following:

import {
    NodeMaterial,
    INodeMaterialEditorOptions,
} from '@babylonjs/core';

import { NodeEditor } from '@babylonjs/node-editor';

export class MyNodeMaterial extends NodeMaterial {
    public edit(config?: INodeMaterialEditorOptions): Promise<void> {
        return new Promise((resolve, reject) => {
            NodeEditor.Show({
                nodeMaterial: this
            });
            resolve();
        });
    }

Basically, I’ve removed everything about BJSNODEMATERIALEDITOR and NODEEDITOR and BABYLON from the original, only leaving direct initialization in place. No idea where to go from here, but it’s time for bed for me anyway :slight_smile:

I’m trying to create a repro, but it seems there is some funny project structure in my project which triggers the problems and which I cannot replicate in a sandbox so far. Just to keep you posted.

@sebavan I think I might have succeeded: GitHub - rassie/babylonjs-empty-nme-repro. Please see if you can reproduce the problem. I had to add some RxJS to the mix, since this is what the original repository has and I could not reproduce the asynchronicity of my code any other way.

How to use: clone, yarn && yarn run start, then click on Open inspector button, in the inspector navigate to the single available material, click on edit button. You should see an empty popup. After that, look for CHANGEME in src/App.tsx and swap the assignments. After a reload (do not trust fast refresh here) you should be able to trigger proper NME GUI from the material edit button.

1 Like

I ll look into it ASAP.

So for me I am seeing the editor in both cases :frowning:

This is what I am seeing in both cases with versions.

Let me dig a bit deeper

Actually, scratch that it is because you are importing nme in app.tsx :slight_smile: filling in the required info.

Commenting:

// import { NodeEditor } from "@babylonjs/node-editor";

// class MyNodeMaterial extends NodeMaterial {
//   edit(config?: INodeMaterialEditorOptions): Promise<void> {
//     return new Promise((resolve, reject) => {
//       NodeEditor.Show({
//         nodeMaterial: this
//       });
//       resolve();
//     });
//   }
// }

will highlight the issue.

As inspector and node material requires most of babylon it is not totally compatible with tree shaking.

The easiest to solve it is to import:

    import("@babylonjs/core/Legacy/legacy");
    import("@babylonjs/core/Debug/debugLayer");

like:

click$.pipe(withLatestFrom(scene$)).subscribe(([_click, scene]) => {
  Promise.all([
    import("@babylonjs/core/Legacy/legacy"),
    import("@babylonjs/core/Debug/debugLayer"),
  ]).then(_values => showHideInspector(scene));
});

I ll bring a solution in a bit if you want it all coming from your chuncks only :slight_smile:

it should be:

click$.pipe(withLatestFrom(scene$)).subscribe(([_click, scene]) => {
  Promise.all([
    import("@babylonjs/core/Legacy/legacy"),
    import("@babylonjs/node-editor"),
    import("@babylonjs/inspector"),
    import("@babylonjs/core/Debug/debugLayer"),
  ]).then(_values => showHideInspector(scene));
});

but currently has an issue cause the editor constructor is stored in the nme before its first use so before we side load it.

I will make a PR for it ASAP.

So PR is here: Fix NME in ES6 by sebavan · Pull Request #10011 · BabylonJS/Babylon.js · GitHub

And the following code would work perfectly all locally:

click$.pipe(withLatestFrom(scene$)).subscribe(([_click, scene]) => {
  Promise.all([
    import("@babylonjs/node-editor"),
    import("@babylonjs/inspector"),
    import("@babylonjs/core/Debug/debugLayer"),
  ]).then(_values => showHideInspector(scene));
});
1 Like

Thanks! While we are at it: you don’t do patch/bugfix releases, don’t you? Would like to avoid upgrading to a 5.0-alpha for right now…

Unfortunately no :frowning: you can nevertheless use the first answer which uses it from unpckg