Unable to use SceneLoader.ImportMesh to import .babylon file


I’m trying to import a .babylon file using ImportMesh() like follow:

BABYLON.SceneLoader.ImportMesh(“trunk”, “”, “trunk.babylon”, this._scene,() => {})

But I got:
Failed to load resource: net::ERR_FILE_NOT_FOUND
BJS - [14:40:11]: Unable to import meshes from trunk.babylon: importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse

The “trunk.babylon” sits right next to the file which calls it.

Thanks for any suggestions!

And here is the code:

  import * as BABYLON from 'babylonjs';
  import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import App from './react_src/App';
  import store from "./react_src/store";
  import {Provider} from "react-redux";

  export default class Renderer {
      private _canvas: HTMLCanvasElement;
      private _engine: BABYLON.Engine;
      private _scene: BABYLON.Scene;

      createScene(canvas: HTMLCanvasElement, engine: BABYLON.Engine) {
          const scene = new BABYLON.Scene(engine);
          this._canvas = canvas;
          this._engine = engine;
          this._scene = scene;
          // this._engine.enableOfflineSupport = false;

          const camera = new BABYLON.UniversalCamera("Camera", new BABYLON.Vector3(0, 10, -10), this._scene);

          camera.attachControl(this._canvas, true);

        this._canvas.addEventListener("keydown", (e) => {
            if (e.key === "a") {
                camera.cameraDirection.x -= 0.1;
            if (e.key === "d") {
                camera.cameraDirection.x += 0.1;
            if (e.key === "w") {
                camera.cameraDirection.z += 0.1;
            if (e.key === "s") {
                camera.cameraDirection.z -= 0.1;

        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
        const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), this._scene);
        light.intensity = 1;
        // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
        const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {}, this._scene);
        // Move the sphere upward 1/2 its height
        sphere.position.y = 1;
        // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
        const ground = BABYLON.MeshBuilder.CreateGround("ground", {}, this._scene);

        BABYLON.SceneLoader.ImportMesh("trunk", "", "trunk.babylon", this._scene,
            () => {

    initialize(canvas: HTMLCanvasElement) {
        const engine: BABYLON.Engine = new BABYLON.Engine(canvas, true);
        this.createScene(canvas, engine);

        engine.runRenderLoop(() => {
            document.getElementById("fpsLabel").innerHTML = engine.getFps().toFixed() + "fps";

        window.addEventListener('resize', function () {

  const renderer = new Renderer();
  renderer.initialize(document.getElementById('render-canvas') as HTMLCanvasElement);

        <Provider store={store}>

Hello and welcome!!
can you try this:

BABYLON.SceneLoader.ImportMesh("trunk", "./", "trunk.babylon", this._scene,
            () => {

Hi Deltakosh,

Thanks for your reply, but it’s still the same error.

I found similar issues on the web with this error are mostly about babylonjs-loaders, I assume the loader is for loading different file formats like .obj, since I’m using .babylon, there is no need for a loader, is that correct?

This is correct and your issue here is definitely just an url location error.

Can you open the f12 profiler and check the network tab to see where babylon tries to load the file?

1 Like

You are right! I didn’t give a right path to Babylon. The network tab shows wrong url. Your first answer was correct, I changed 2nd parameter of ImportMesh() to the proper path and that’s it! Such a small mistake, took me hours haha!

Thank you so much!

My pleasure!