New Inspector Toolkit Not Defined

Yo @Deltakosh

With the new inpsector, it is not loading the BabylonToolkit query string plus the Load Babylon Toolkit menu option.

Not me but @ryantrem

Also @knervous

That querystring looks a bit mangled webgpu=&... not sure if that’s causing any issues but I will take a look at this soon

Was able to load this PG up alright, does it work in a new tab @MackeyK24 ?

This url used to work fine:

Now it get this on my machine:

And I am even specify BabylonToolkit QueryString and i have the Load BabylonToolkit option selected, but i still get TOOLKIT not defined error.

Yo @knervous

If i create a new playground and run it.. it works.

But as soon I save the playground and reload:

It seems to be missing the babylon.toolkit.js that is supposed to get loaded in the play ground if either the Load Babylon Toolkit option is selected or BabylonToolkit is passed in the query string.

It seems to be happening on loading a saved playground. It is missing the babylon.toolkit.js

But on a new playground, it is there:

1 Like

For me I get the same error whether it is a new playground or a saved one being loaded. I don’t think this has anything to do with the new Inspector, probably more likely the “Editor v2” changes I would think. I will try to get a callstack in a local build for some more clues.

@knervous you are not able to repro this?

I think there must be a timing issue here. After rebooting my machine (unrelated), I opened the linked PG and it worked fine. But then I duplicated the tab and got the same error again. Still looking…

@knervous it looks to me like there is a circular dependency in the new Editor v2 code, specifically here: Playground Editor V2: Multi-file, ES modules, NPM Support + Build out… · BabylonJS/Babylon.js@6af14f4

The first line (importFn) of this block of code is the one that actually imports/loads the PG code, and the last line (initRuntime) of this block of code is the one that loads libraries like AMMO and TOOLKIT. So it seems the PG code is loaded with references to modules that have not been loaded yet and fails. This seems to be why if you just load the Playground site with the default code first, then copy/paste the code from above it works (because TOOLKIT has already been loaded in this case).

From what I can tell, the way this used to work is that the loading of these libraries (like TOOLKIT) were done by inserting extra code at the beginning of the PG code being executed, so it was certain to be loaded before the rest of the PG code executes. But now, importFn depends on those modules being loaded (if they are referenced) by initRuntime, but also initRuntime depends on the importFn having run the PG code so it can get the engine instance.

If I’m reading this correctly, then I don’t have an obvious idea of how to fix this other than going back to the way it used to work where some of this init (at least AUDIO, which seems to require the engine instance) is managed by injecting extra code into the PG code snippet.

2 Likes

@MackeyK24 @ryantrem Thanks for the additional info here, was able to repro locally and have a fix up in this PR

The global dependencies that might be referenced in user code should be available before trying to compile the PG module as Ryan mentioned. This hoists that code above the module compile. The only dep that needs the engine to exist is Sound, so that’s moved to post-creation.

Of course it’d be good to keep the legacy code path for depending on external libs, was thinking it’d also be nice to offer an entrypoint from an import angle (this probably would’ve already worked) to

import { TOOLKIT } from '@babylonjs-toolkit/dlc';

Depending on version pinned in that line this could resolve through global namespace if it already exists or just use the existing ES dependency chain like anything else.

1 Like

FYI… if you need to link to a import/export module versions:

UMD: https://www.npmjs.com/package/babylonjs-toolkit

ES6: https://www.npmjs.com/package/@babylonjs-toolkit/next

CLASSIC
https://cdn.jsdelivr.net/gh/BabylonJS/BabylonToolkit@master/Runtime/babylon.toolkit.js
https://cdn.jsdelivr.net/gh/BabylonJS/BabylonToolkit@master/Runtime/babylon.toolkit.d.ts