Can’t load model with npm but works with cdn

Bugs
1

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

(index.html)

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

    <!--<script src="https://cdn.babylonjs.com/babylon.js"></script>-->
    <script type="module" src="./js/start.js"></script>

</head>
<body>

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

</body>
</html>

(start.js)

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 () {
    scene.render();
});

(folder structure)
image

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 !

2

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

3

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

4

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.

5

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.

6

i’m not a frequent user of git, this is good : https://github.com/DragoLeForgeron/3DWeb ?

7

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 :-))?

8

oh i’m sorry, it should be good

10

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"
	}
}
</script>

Typed that on my phone so hope its ok lol

11

well…
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

13

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
works
<script src="./node_modules/babylonjs/babylon.js"></script>
wont work
<script src="./node_modules/babylonjs/babylon.js" type="module"></script>

14

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';