ImportMeshAsync error

I know this question has come up a lot, but none of the solutions I’ve seen are working for me.

I’m getting this error:

Uncaught (in promise) RuntimeError: Unable to load from ./assets/models/tree.glb: importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse
    at errorHandler (index.js:49172:40)
    at Object.importMesh (index.js:122760:9)
    at index.js:49205:27
    at dataCallback (index.js:49048:7)
    at index.js:16809:5
    at XMLHttpRequest.onReadyStateChange (index.js:16905:17)

I’m trying to import a mesh like so:

 SceneLoader.ImportMeshAsync(['tree'], './assets/models/', 'tree.glb', undefined, undefined, '.glb').then((result) => {
   const tree = result.meshes[0];
   tree.position = new Vector3(0, 0, 0);

Here are my imports:

import { Engine, HemisphericLight, Scene, SceneLoader, UniversalCamera, Vector3 } from '@babylonjs/core';
import { Inspector } from '@babylonjs/inspector';
import { EcsEngine } from './ecsEngine';
import { Section, TrackComponent } from './components/track.component';
import { Entity } from 'tick-knock';
import { initSystems } from './startup/systemRegistration';
import { LocomotiveComponent } from './components/locomotive.component';
import '@babylonjs/loaders/glTF';

and my package.json:

  "name": "boxcar",
  "module": "index.ts",
  "type": "module",
  "devDependencies": {
    "bun-types": "^1.0.14"
  "peerDependencies": {
    "typescript": "^5.0.0"
  "dependencies": {
    "@babylonjs/core": "^6.31.0",
    "@babylonjs/inspector": "^6.31.0",
    "@babylonjs/loaders": "^6.31.0",
    "eslint": "^8.54.0",
    "prettier": "^3.1.0",
    "tick-knock": "^4.2.0"

You can find the whole repo here: GitHub - ThomasBurgess2000/boxcar at choo-choo (relevant file is src/game.ts)

Check your GLB, it throws errors in any GLTF viewer.

Bizarre, it works for me in the sandbox and the 3d viewer on Windows. Also the magic number error is a different type of error I believe, one that only happens after it has correctly tried to load it as glb. The JSON parse error makes me think it didn’t get that far.

Do you use the same file that in GH repo?

The version on GH is saying ‘trying to load tree’? Might not be fully uploaded or something else wrong with your branching.

Yes, when I posted that screenshot I downloaded it on my phone from the branch I linked (“choo-choo”) where the latest commit is “trying to load tree”.

I just downloaded it again on my laptop here:

and it worked again in the sandbox.

But just to show that it’s not the GLB, I just pushed another asset that I’ve used in a different project and definitely works (it’s just the default blender sphere).

However, this project still returns the same error.

I’m using bun for the first time in case that’s relevant

Check if absolute URLs work.

It does not. For reference, previous answers to this question centered around something wrong with the loader import:

It looks like maybe you’re missing the GLTF loader. After you install the package “@babylonjs/loaders” then you can import GLTF loading support like below.

import "@babylonjs/loaders/glTF";

Turns out it was a version mismatch with the babylonjs preview npm packages and 4.2.1

removing the preview package dependencies and updating the versions worked

However, as far as I can tell, I do not have a version mismatch and am importing the correct plugin.

This returns false:

  const isPluginAvailable = SceneLoader.IsPluginForExtensionAvailable('.glb');

And I also noticed I was missing this warning:

index.js:6908  BJS - [21:04:36]: Unable to find a plugin to load .glb files. Trying to use .babylon default plugin. To load from a specific filetype (eg. gltf) see:

I also confirmed that there are references to @babylonjs/loaders/glTF in my build/index.js file, so it seems like it’s not being tree-shaken or something.

what is SceneLoader2?

I can see that the gltf/glb extensions are being added here in the debugger:

if (SceneLoader2) {
  SceneLoader2.RegisterPlugin(new GLTFFileLoader);

While .babylon is being added in the separate SceneLoader

  name: "babylon.js",
  extensions: ".babylon",

Here are those imports in the build file:

// node_modules/@babylonjs/loaders/node_modules/@babylonjs/core/Loading/sceneLoader.js
var SceneLoaderAnimationGroupLoadingMode2;
(function(SceneLoaderAnimationGroupLoadingMode3) {
  SceneLoaderAnimationGroupLoadingMode3[SceneLoaderAnimationGroupLoadingMode3["Clean"] = 0] = "Clean";
  SceneLoaderAnimationGroupLoadingMode3[SceneLoaderAnimationGroupLoadingMode3["Stop"] = 1] = "Stop";
  SceneLoaderAnimationGroupLoadingMode3[SceneLoaderAnimationGroupLoadingMode3["Sync"] = 2] = "Sync";
  SceneLoaderAnimationGroupLoadingMode3[SceneLoaderAnimationGroupLoadingMode3["NoSync"] = 3] = "NoSync";
})(SceneLoaderAnimationGroupLoadingMode2 || (SceneLoaderAnimationGroupLoadingMode2 = {}));

class SceneLoader2 {
// node_modules/@babylonjs/core/Loading/sceneLoader.js
var SceneLoaderAnimationGroupLoadingMode;
(function(SceneLoaderAnimationGroupLoadingMode2) {
  SceneLoaderAnimationGroupLoadingMode2[SceneLoaderAnimationGroupLoadingMode2["Clean"] = 0] = "Clean";
  SceneLoaderAnimationGroupLoadingMode2[SceneLoaderAnimationGroupLoadingMode2["Stop"] = 1] = "Stop";
  SceneLoaderAnimationGroupLoadingMode2[SceneLoaderAnimationGroupLoadingMode2["Sync"] = 2] = "Sync";
  SceneLoaderAnimationGroupLoadingMode2[SceneLoaderAnimationGroupLoadingMode2["NoSync"] = 3] = "NoSync";
})(SceneLoaderAnimationGroupLoadingMode || (SceneLoaderAnimationGroupLoadingMode = {}));

class SceneLoader {

it appears my modules got screwed up, deleting the bun lock and node_modules resolved the issue