TypeError: BABYLON.Engine is not a constructor

Questions
1

Hello, writing an extension for turbowarp (a mod for scratch), and I’ve came across this issue
image

Code :

(async function(Scratch) {
    'use strict';
  
    if (!Scratch.extensions.unsandboxed) {
      throw new Error('This Hello World example must run unsandboxed');
    }

    const BABYLON = await import('https://cdn.babylonjs.com/babylon.js');

    const canvas = document.createElement("renderCanvas")

    Scratch.vm.renderer.addOverlay(canvas);

    const engine = new BABYLON.Engine(canvas, true);
  
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 4, 10, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);

    engine.runRenderLoop(() => {
        scene.render();
    });

    class u3D {
      getInfo() {
        return {
          id: 'untitled3d',
          name: 'untitled 3d',
          blocks: [
            {
              opcode: 'initializescene',
              blockType: Scratch.BlockType.COMMAND,
              text: 'initialize scene'
            }
          ]
        };
      }
      initializescene() {
        return 'World!';
      }
    }
    Scratch.extensions.register(new u3D());
  })(Scratch);

I can’t use HTML code here, extensions for turbowarp are JS files and I can’t have importmaps for example.

Loading extensions to turbowarp is easy (to reproduce the error yourself) go to turbowarp.org click the editor button at the top, then go to left bottom of the page and click this button

image
image809×528 32.9 KB

and then go to

image
image1074×662 81 KB

click at custom extensions

image
image1221×708 68.4 KB

then do the following steps

image
image1223×753 65.3 KB

1st click at the text button
2nd copy and paste the code I provided at the top of this post
3rd run without sandbox (so that I can import babylonJS)
and 4th step click load

Then click F12 to open console and wait for the error to show up.

2

We do not have a es6 bundle, you could try using require instead ? or loading a script this way ?

const loadScriptAsync = function (url, instantResolve) {
    return new Promise((resolve) => {
        const urlToLoad = "yourURL";
        const script = document.createElement("script");
        script.src = urlToLoad;
        script.onload = () => {
            resolve();
        };
        script.onerror = (e) => {
            reject(e);
        };
        document.head.appendChild(script);
    });
};
1 Like