importScene of undefined from undefined version: undefined, exporter version: undefined. importScene has failed JSON parse

Questions
,
1

I apologize in advance, I use auto-translate.
I have a problem that I have not been able to solve for several hours now.

“Unable to find a plugin to load .gltf files. Trying to use .babylon default plugin. To load from a specific filetype (eg. gltf)”

I’m using vite in my build, I don’t understand why I can’t get the plugin to load a model

Here is the code for my scene component:

import {
    Scene,
    WebGPUEngine,
    Vector3,
    MeshBuilder,
    ActionManager,
    ExecuteCodeAction,
    SceneLoader,
} from 'babylonjs';
import Menu from '../root';
import { StaticCamera } from '../MenuProviders/Cameras/StaticCamera';
import { SpotLigth } from '../MenuProviders/Light/SpotLigth';
import { DevKit } from '../../DevelopEntity/DevKit';
import '@babylonjs/loaders/index';

export class Main {
    /**
     * Движок.
     */
    private engine;
    /**
     * Канвас
     */
    private viewport;
    /**
     * Родитель
     */
    private root;
    /**
     * Ресурсы для построения сцены
     */
    private resources;

    /**
     * TODO: Надо описать
     * @param engine
     * @param viewport
     * @param root
     */
    constructor(
        engine: WebGPUEngine,
        viewport: HTMLCanvasElement,
        resources: any,
        root: Menu,
    ) {
        this.engine = engine;
        this.viewport = viewport;
        this.resources = resources;
        this.root = root;
    }

    scene() {
        const scene = new Scene(this.engine);

        new DevKit(
            { scene },
            {
                scene: scene,
                viewport: this.viewport,
                target: Vector3.Zero(),
            },
        );

        const cube = MeshBuilder.CreateBox('box', {
            size: 1,
            height: 2,
            width: 2,
        });

        // Загружаем модель в сцену
        const rootURL = './assets/adam/';
        const fileName = 'adamHead.gltf';

        SceneLoader.Append(
            rootURL,
            fileName,
            scene,
            function (scene) {
                console.log('Model loaded successfully!');
            },
            null,
            function (scene, message) {
                console.error('Error loading model: ', message);
            }
        );

        cube.actionManager = new ActionManager(scene);
        cube.actionManager.registerAction(
            new ExecuteCodeAction(ActionManager.OnPickTrigger, () => {
                this.root.change('menu', 'store');
            }),
        );

        /**
         * Камера
         */
        new StaticCamera(
            scene,
            'menu__main_camera',
            this.viewport,
            new Vector3(0, 0, -10),
        );

        /**
         * Свет
         */
        const mainLigth = new SpotLigth(
            'menu__main_spot_ligth',
            scene,
            new Vector3(-4.6, 4.1, -14.9),
            new Vector3(0.5, -0.2, 0.7),
            90,
            1,
        );
        mainLigth.setIntensity(0.2);
        /**
         * TODO: возможно стоит разобраться с clone() ради оптимизации
         */
        const mainLigth_Two = new SpotLigth(
            'menu__main_spot_ligth_two',
            scene,
            new Vector3(4.6, 4.1, -14.9),
            new Vector3(0, -0.1, 0.9),
            90,
            1,
        );
        mainLigth_Two.setIntensity(0.2);

        return scene;
    }
}

All versions of the packages are the same
package.json

{
  "name": "other",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "prepare": "husky install"
  },
  "devDependencies": {
    "@babylonjs/core": "^7.10.0",
    "@babylonjs/gui": "^7.10.0",
    "@babylonjs/inspector": "^7.10.0",
    "@types/earcut": "^2.1.4",
    "husky": "^9.0.11",
    "typescript": "^5.4.5",
    "vite": "^5.2.13"
  },
  "dependencies": {
    "@babylonjs/loaders": "^7.10.0",
    "@heroiclabs/nakama-js": "^2.7.1",
    "babylonjs": "^7.10.0",
    "babylonjs-gui": "^7.10.0",
    "babylonjs-serializers": "^7.10.0",
    "jszip": "^3.10.1"
  }
}

Please help, I’m getting tired of searching in the browser search bar.

2

Hello and welcome!

Seems that you mix different import types, i.e. babylonjs and @babylonjs.
I would advise to make all imports in your scene starting from @ to use all tree-shaking benefits.
In this case install like desctibed here - @babylonjs/core - npm
and use loaders as here @babylonjs/loaders - npm
(all packages should be the same version).

2 Likes
3

Hello and welcome :slight_smile:

For GLTF there is a specific loader → https://cdn.babylonjs.com/loaders/babylon.glTFFileLoader.js
I think in your case the import would be
import "@babylonjs/loaders/glTF";

++
Tricotou

1 Like
4

Sorry for the confusion, import ‘@babylonjs/loaders/index’; is me trying to fix things. I have tried your solution before, among others.
Thank you for not being indifferent!

5

It seems to have worked! The warning is gone and I’m sitting here smiling! Really that was the problem… Now there is a lot to fix in the project, but you made my day - HUGE THANK YOU!!!).

1 Like