Babylon and Django

Questions
1

Hello,
Does anyone know how to get a babylon module running using django?
My app.js file:

import “@babylonjs/core/Debug/debugLayer”;
import “@babylonjs/gui/2D”;
import “@babylonjs/inspector”;
import “@babylonjs/loaders/gltf”;
import “@babylonjs/gui”;
import * as GUI from ‘babylonjs-gui’;
import {Engine, Scene, ArcRotateCamera, Vector3, HemisphericLight, MeshBuilder, SceneLoader} from “@babylonjs/core”;

class app {
constructor() {
const canvas = document.createElement(“canvas”);
canvas.style.width = “100%”;
canvas.style.height = “100%”;
canvas.id = “gameCanvas”;
document.body.appendChild(canvas);

    this.canvas = document.getElementById("gameCanvas");
    this.engine = new BABYLON.Engine(this.canvas, true);
    this.scene = null;
}

async createScene() {
    this.scene = new BABYLON.Scene(this.engine);

    const camera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), this.scene);
    camera.attachControl(this.canvas, true);
    const light1 = new HemisphericLight("light1", new Vector3(1, 1, 0), this.scene);
    SceneLoader.ImportMesh("", "", "pizza.glb", this.scene);
    //
    // const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
    // const button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me");
    // button1.width = "150px";
    // button1.height = "40px";
    // button1.color = "white";
    // button1.cornerRadius = 20;
    // button1.background = "green";
    // button1.onPointerUpObservable.add(function() {
    //
    //     alert("you did it!");
    // });
    const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
    await advancedTexture.parseFromSnippetAsync("I59XFB#11");
    // advancedTexture.addControl(button1);

    return this.scene;
}

}

let myApp;
myApp = new app();
const scene = await myApp.createScene();

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

my html file:

My Django Page {% load static %}

My Error:
pected a JavaScript module script but the server responded with a MIME type of “text/plain”. Strict MIME type checking is enforced for module scripts per HTML spec.

I have already installed babylon using npm install --save babylonjs

2

You might need to either transpile the babylon modules to commonjs or pack a JS app before consuming it in Jango as it seems it does not support ES modules.

3

thank you for the suggestion, I have made a webpack and am using that js file, but still getting the same error.

4

nvrmind fixed it after making a simpler version of the project, and webpack was the way to go!