"Unable to find a plugin to load .glb files." When using NPM and webpack

Questions
1

I followed the directions on babylonjs-loaders - npm
But am not able to get the loader to work.

Any suggestions? Doe they have to be loaded on the global context of the page or something?

the JS file that calls the loading has

import * as BABYLON from '@babylonjs/core';
import 'babylonjs-loaders';

at the top so I figured stuff would work.

UPDATE I might of found my answer in this @babylonjs/loaders - npm

2

Yup, I was doing es6 stuff…
https://doc.babylonjs.com/features/npm_support#example-using-webpack
Helped a lot!

2 Likes
3

I have the same error message, using webpack and es5. @Pryme8 how did you solve it? My import statement is

import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';
4

I have an example of an es6 project with model loading here - babylonjs-webpack-es6/loadModelAndEnv.ts at master · RaananW/babylonjs-webpack-es6 · GitHub , just in case it helps anyone

5

Thanks for this. Do I need to switch to es6, or should this be possible in es5?

6

no clue actually maybe try the webpack instructions?

7

You can change your output to whatever you want. The input is our es6 packages.
if I remember correctly the output is already es5.

8

I got this working. There were several things I was doing wrong.

First up, I’d managed to so mess up my webpack setup that the dev server wasn’t serving the latest version of the code. It took me ages to notice this. What seemed to finally fix it was changing the outDir in tsconfig. The BablylonJS npm docs page has this "outDir": "./", but for me this caused a typescript error Cannot write file index.d.ts ... because it would overwrite input file. Changing it to a random output dir "outDir": "appOutDir" fixed webpack not reloading.

My second mistake was that I’d forgotten to statically vend the glb files. @RaananW the solution in your repo helped here, thanks for that:

{
                test: /\.(png|jpg|gif|env|glb|stl)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                    },
                }, ],
            }

Seeing how easy it is to completely mess up webpack if you don’t know what you’re doing led me to try Parcel, seems to be working well. I added a second package parcel-plugin-static-files-copy to statically vend the glb file.

1 Like
9

Can we reference it in bjs doc?

10

Yes, I’ll add it to the doc along with a few other examples

1 Like
11

in es6 module,

install @babylonjs/loaders via npm

add the following code to your code

import “@babylonjs/loaders”

then the problem solved.