Can’t load model with npm but works with cdn

i’m trying to load a model on an html web page with these codes :


<!DOCTYPE html>
    <title>Babylon test</title>
    <link rel="stylesheet" href="./css/style.css">

    <!--<script src=""></script>-->
    <script type="module" src="./js/start.js"></script>


    <div id="contener">
        <canvas id="renderCanvas"></canvas>



import * as BABYLON from 'babylonjs';

const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);

const createScene = function () {

    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3.Zero);
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(-0.5, 1.5, 1.5));

    const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);

    return scene;

const scene = createScene();

engine.runRenderLoop(function () {

(folder structure)

and it doesn’t work, but when i use CDN (so put my “import” at comment) it works.
i don’t understand…
did i do something wrong ?

Thanks for your help and suggestions !

i forgot to say that to launch my html i use the “live server” extension from Visual Studio Code

Did you also import the babylonjs-loaders as you can find in the readme babylonjs-loaders - npm ?

yes, i didn’t import it into my file but i already downloaded “babylonjs”, “babylons-materials” and “babylonjs-loaders” with the npm.

I tried to add “import ‘babylonjs-loaders’;” in my js file but it still doesn’t work.

Would be great if you could provide a repro on Github so that @RaananW can have a look :slight_smile: he is the module master.

i’m not a frequent user of git, this is good : ?

1 Like

i think it is a private repository, as i am unable to see it. want to add me as a contributor? (or make it public :-))?

1 Like

oh i’m sorry, it should be good

1 Like

You have to put the actual path to the file, with extension, for it to work in the browser or use import maps if youre using chrome. Ie: from “…/…/node_modules/babylon/babylon.js. Or u can just copy it into a closer path. Alternatively, import maps create a global alias so importing from “babylon” will work. In head or top of body, just before other scripts do this

<script type="importmap">
"imports": {
	"babylon": "./babylon.module.js"

Typed that on my phone so hope its ok lol

i’ve tried many times this code on my html page and it wasn’t working.

    <script src="./node_modules/babylonjs/babylon.js"></script>
    <script src="./node_modules/babylonjs-materials/babylonjs.materials.js"></script>
    <script src="./node_modules/babylonjs-loaders/babylonjs.loaders.js"></script>

but now it seems to be working, maybe i wrote something wrong last times. :man_shrugging:

I will continue to work like that this week and i will tell you back if it worked well and then i will close the topic


the babylonjs package isnt an es module, it’s a script. es module means the code uses “export” keyword, whereas scripts just provide an iife (immediately invoked function expression) or attach themselves to window manually doing window.BABYLON = (lots of code). IIFE is just doing (() => whatever)() so it runs automatically. You can also accomplish a similar effect by putting a ! in front of functions. The ! is a short hand instruction to check for truthiness , but it still forces it to evaluate.

blah blah blah ok. TLDR
<script src="./node_modules/babylonjs/babylon.js"></script>
wont work
<script src="./node_modules/babylonjs/babylon.js" type="module"></script>

Okay, so the solution is to put this line on the head bloc of the html :

<script src="./node_modules/babylonjs/babylon.js"></script>

then simply put the code in a body bloc of the html without this line :

import * as BABYLON from 'babylonjs';