BABYLON.ImportMeshAsync() importMesh of undefined from undefined version: undefined

Questions
1

I am trying the following tutorial, but I am getting an error with ImportMeshAsync.

I am trying with local node/typescript and the Babylon.js version is v8.2.1.
The package import does not seem to be working, but the solution is not clear.
We would be grateful if you could help me.

Error Message

RuntimeError: Unable to load from https://assets.babylonjs.com/meshes/valleyvillage.glb: importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse
    at t3 [as constructor] (error.ts:7:1)
    at new t3 (error.ts:76:14)
    at p2 (sceneLoader.ts:888:42)
    at Object.importMesh (babylonFileLoader.ts:937:17)
    at _2 (sceneLoader.ts:935:35)
    at f3 (sceneLoader.ts:676:13)
    at fileTools.ts:527:13
    at XMLHttpRequest.e4 (fileTools.ts:682:37)

pacakge.json

{
  "name": "babylon-trial",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@types/earcut": "^3.0.0",
    "typescript": "~5.7.2",
    "vite": "^6.2.0"
  },
  "dependencies": {
    "@babylonjs/core": "^8.2.2",
    "@babylonjs/loaders": "^8.2.2",
    "babylonjs": "^8.2.1",
    "earcut": "^3.0.1"
  }
}

Code

import "babylonjs";
// import earcut from 'earcut';
// (window as any).earcut = earcut;

import { registerBuiltInLoaders } from "@babylonjs/loaders/dynamic";
registerBuiltInLoaders();

// Viewer / Engine / Scene / Camera / Light
const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);

const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 200, new BABYLON.Vector3(0, 1, 0), scene);
camera.attachControl(canvas, true);

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

// import 3d model
BABYLON.ImportMeshAsync(
  "https://assets.babylonjs.com/meshes/valleyvillage.glb",
  scene
).then((result) => {
  // success
}).catch((error) => {
  // faild
  console.error(error);
});

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

// resize
window.addEventListener("resize", () => {
  engine.resize();
});
2

You mix different version numbers and version types (UMD and ES6) in your package.json. Leave only those which start with “@”.

Now, in your code file, change import "babylonjs"; to something like

import {Engine, Scene, ArcRotateCamera, HemisphericLight ...etc} from "@babylonjs/core"
import "@babylonjs/loaders";

And remove BABYLON namespace from the relevant lines

const engine = new Engine(canvas, true);

and so on.

Here is Github repo with all lessons from this tutorial - GitHub - leostereo/babylonjs_pid: babylonjs village tutorial running on local environment with vite starter template

2 Likes
3

Hi! @labris

I see that Babylon.js provides a package for each UMD/ES6, and that I had mixed up the steps from separate reference information.

I will also refer to the page below and try to unify them with ES6.

I will also refer to the repository you referred me to.
It helped me a lot because I’m not used to web development either.
Thank you so much!

For anyone else stuck with the same error, I’ve also included the code that worked after modifying it based on your answer.

pacakge.json

{
  "name": "babylon-trial",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@types/earcut": "^3.0.0",
    "typescript": "~5.7.2",
    "vite": "^6.2.0"
  },
  "dependencies": {
    "@babylonjs/core": "^8.2.2",
    "@babylonjs/loaders": "^8.2.2",
    "earcut": "^3.0.1"
  }
}

Code

import { Engine, Scene, ArcRotateCamera, HemisphericLight, Vector3, ImportMeshAsync } from "@babylonjs/core"
import "@babylonjs/loaders";

// Viewer / Engine / Scene / Camera / Light
const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
const engine = new Engine(canvas, true);
const scene = new Scene(engine);

const camera = new ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 200, new Vector3(0, 1, 0), scene);
camera.attachControl(canvas, true);

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

// import 3d models
ImportMeshAsync(
  "https://assets.babylonjs.com/meshes/valleyvillage.glb",
  scene
).then((result) => {
  // success
}).catch((error) => {
  // faild
  console.error(error);
});

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

// resize
window.addEventListener("resize", () => {
  engine.resize();
});
1 Like