BJS on ObservableHQ

Demos and projects
21

Ok, found the issue. the inspector downloads a CDN version of the GUI for some reason. I’ll check that and make sure that doesn’t happen.

EDIT

Correction - since you can’t define a specific version to download in observable, it downloads the latest stable version, which doesn’t correspond to our preview version. There are two solutions for this -

  1. move to work with cdn.babylonjs.com instead of preview.babylonjs.com (which will give you 4.2.0 stable)
  2. download the babylon GUI beforehand (to avoid observable resolving dependencies on its own).
22

Thanks,

The notebook at Hello, BabylonJS Inspector / Andreas Plesch / Observable already uses preview.babylonjs.com .

should download version 21011fc83099a0845a5e6d92fd54c4b43d1c68d4 ( the latest ) of both Babylon.js and the inspector bundle.

This is the version which provokes the error. I can just keep using an earlier commit version like ee7fb62f877de23caf225d4decf103d5c90b9467 which still worked.

23

Not the inspector but the GUI.

the issue is the needed dependency that is missing. It is therefore downloaded using the latest stable version and not the preview version.

24

ah ok. The GUI is a new needed dependency ?

25

no, it was always there :slight_smile:
It is just that it is using an internal class that has changed in this version.
You need to make sure all dependencies are from the same version.

26

Ok. I think I can figure it out. Are there other dependencies with such internal classes ?

27

you should always be sure to load all needed dependencies from the same babylon version. Every babylon package has a different list of dependencies that should be respected. you can see the lists on npmjs.com or in the package.json file of each package. when installing using npm you will get a warning, but here you are requiring a .js file so it doesn’t work the same.

28

Thanks again.

I could not find a package.json for gui but did see Babylon.js/tsconfig.json at master · BabylonJS/Babylon.js · GitHub

It lists just babylon.js.

Similarly, tsconfig.json for the Inspector lists

            "babylonjs-gltf2interface": ["../../dist/preview release/glTF2Interface/babylon.glTF2Interface.d.ts"],
            "@babylonjs/loaders/glTF/2.0/Extensions*": ["../../../distES6/loaders/glTF/2.0/Extensions"],
            "babylonjs-loaders/*": ["../../dist/preview release/loaders/babylonjs.loaders.module.d.ts"],
            "babylonjs-materials/*": ["../../dist/preview release/materialsLibrary/babylonjs.materials.module.d.ts"],
            "babylonjs-serializers/*": ["../../dist/preview release/serializers/babylonjs.serializers.module.d.ts"],
            "babylonjs/*": ["../../dist/preview release/babylon.module.d.ts"]

Does that mean it is necessary to load these in advance of the Inspector ? Are these not contained in the bundle ?

Apologies for all the questions.

29

After also loading babylon-materials explicitly from preview the inspector seems happy:

Thank you for all your help.

30

The best way would be to search here - babylonjs-inspector - npm .
The package.json is generated when needed (i.e. when published). What i meant was to check the package.json of the package that is locally installed, but in your case it’s not 100% a solution :slight_smile:

31

I think this is the relevant package.json:

It lists version “5.0.0-alpha.48” for the dependencies. However, this version is a few commits before the current distribution on preview. Could that be reason why the preview Inspector does not seem to use the bundled modules ?

Anyways, I know now a lot more about the babylon modular system than I probably should ;).

32

that’s the package.json if you use npm, but you don’t :slight_smile:

You use our preview cdn :slight_smile:
Let’s agree that you need to use the same of everything. if you use the cdn, use everything from the cdn. if you use preview cdn, use everything from the preview cdn. if you use npm, use everything with the same version. And this way everything will work as expected.

I was trying to explain how you find the dependencies needed :slight_smile: It doesn’t matter how, as long as you make sure all dependencies are resolved correctly.

1 Like
33

Ok, very clear. Just as a note to myself I think that means that the preview cdn may be slightly ahead (?) of a locally build version, and that the preview bundle may not always internally work with itself (?).

Thank you again for all your help.

1 Like
34

I assume you mean the npm package - so yes, you are right :slight_smile:

the preview cdn is our nightly which is built almost every day. The npm package is published once a week (aprox).

35

Because the preview cdn is more prominently displayed, I was not even aware that alpha versions were on npm. That clears up the confusion. I will then just switch to npm alpha.