The packages installed via pnpm cannot be imported as '@babylonjs/loaders/glTF/2.0'

Questions
1

Hello Babylon.js community,

I am encountering an issue while trying to load a GLB model within a Vue 3 component using babylonjs-loaders. The relevant file is located at:
src/views/HomeView/components/ModeList.vue

I have created a minimal reproduction of the problem on StackBlitz for your convenience:
Live Example: https://stackblitz.com/edit/github-nnpsen3x?file=src%2Fviews%2FHomeView%2Fcomponents%2FModeList.vue

The Goal:
I want the loadGLB method in that file to execute successfully and display the 3D model.

The Problem:
The GLB model fails to load or display as expected. The specific symptoms are [please briefly describe what happens instead: e.g., “the scene remains empty,” “a console error occurs,” “the model loads but is invisible,” etc.].

What I’ve Tried/Checked:

  1. I have verified that the @babylonjs/core and @babylonjs/loaders packages are installed and imported correctly in the project.

  2. The GLB file path/URL appears to be correct and accessible.

  3. The basic Babylon.js engine and scene creation seems to work.

    Could you please review the linked ModeList.vue component on StackBlitz and advise on the correct pattern or common pitfalls for loading GLB/GLTF assets using the loaders module within a Vue 3 setup? Any guidance on making the loadGLB method functional would be greatly appreciated.

Thank you for your time and support!

2

I uncommented the line 14 in ModeList.vue component
// import '@babylonjs/loaders/glTF/2.0'

So now @babylonjs/loaders package has the chance to work :slight_smile:

I also changed your model to the Seagull, it is just bigger to see better.

The corrected version of your Stackblitz is here - https://stackblitz.com/edit/github-nnpsen3x-hbwz1qx9
(also fixed a TypeScript error in the BabylonSphere component where the parent prop wasn’t being checked correctly).

1 Like
3

Excuse me, could you please take a look at it for me?

This link is 404.
https://stackblitz.com/edit/github-nnpsen3x-hbwz1qx9

I encountered this error in the local environment.

CleanShot 2026-02-03 at 13.50.33
CleanShot 2026-02-03 at 13.50.331585×1024 302 KB

The error message is as follows

/Users/dalei/.volta/bin/npm run dev
npm warn Unknown user config "home". This will stop working in the next major version of npm.

> code@0.0.0 dev
> vite


  VITE v7.3.1  ready in 414 ms

  ➜  Local:   http://localhost:8981/
  ➜  Network: http://10.17.52.178:8981/
  ➜  Vue DevTools: Open http://localhost:8981/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help
✘ [ERROR] No matching export in "node_modules/.pnpm/@babylonjs+core@8.48.0/node_modules/@babylonjs/core/Buffers/bufferUtils.js" for import "GetBlobBufferSource"

    node_modules/.pnpm/@babylonjs+loaders@8.49.6_@babylonjs+core@8.48.0_babylonjs-gltf2interface@8.49.6/node_modules/@babylonjs/loaders/glTF/2.0/Extensions/MSFT_audio_emitter.js:9:9:
      9 │ import { GetBlobBufferSource } from "@babylonjs/core/Buffers/bufferUtils.js";
        ╵          ~~~~~~~~~~~~~~~~~~~

1:55:12 PM [vite] (client) error while updating dependencies:
Error: Error during dependency optimization:

✘ [ERROR] No matching export in "node_modules/.pnpm/@babylonjs+core@8.48.0/node_modules/@babylonjs/core/Buffers/bufferUtils.js" for import "GetBlobBufferSource"

    node_modules/.pnpm/@babylonjs+loaders@8.49.6_@babylonjs+core@8.48.0_babylonjs-gltf2interface@8.49.6/node_modules/@babylonjs/loaders/glTF/2.0/Extensions/MSFT_audio_emitter.js:9:9:
      9 │ import { GetBlobBufferSource } from "@babylonjs/core/Buffers/buffer...
        ╵          ~~~~~~~~~~~~~~~~~~~


    at failureErrorWithLog (/Volumes/GM7-HD/data/work/babylon-vue3/node_modules/.pnpm/esbuild@0.27.2/node_modules/esbuild/lib/main.js:1467:15)
    at /Volumes/GM7-HD/data/work/babylon-vue3/node_modules/.pnpm/esbuild@0.27.2/node_modules/esbuild/lib/main.js:926:25
    at /Volumes/GM7-HD/data/work/babylon-vue3/node_modules/.pnpm/esbuild@0.27.2/node_modules/esbuild/lib/main.js:1345:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
4

I previously installed it using pnpm. When I tried to import ‘import
“@babylonjs/loaders/glTF/2.0”’, it gave an error. However, using npm works fine.

Thank you very much.

5

This should be correct - Daleistrive - Babylon Vue3 (duplicated) - StackBlitz

Also, there is no sense to import "babylonjs-loaders" (line 22 in your original package.json) when you already use "@babylonjs/loaders" and other packages with “@” at the beginning .

6

You should delete package-lock.json and node_modules, then try reinstalling using pnpm.

1 Like
7

You’re right. After re-installing using pnpm, it works fine now.
Thank you.