# Unable to import .glb model locally using webpack ecosystem

**URL:** <https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188>\
**Category:** Questions\
**Tags:** glb, webpack\
**Created:** [February 13, 2023, 7:23pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188 "2023-02-13T19:23:13Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shadowalker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shadowalker/32/29888_2.png) [@Shadowalker](https://forum.babylonjs.com/u/Shadowalker)\
**Post date:** [February 13, 2023, 7:23pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188/1 "2023-02-13T19:23:13Z")

</div>

Hi everybody! I have struggled a lot with webpack today and haven’t figured out how to solve my problem.

Stack: React + Babylon, Webpack as a bundler.

I want to import a mesh to my scene using **ImportMeshAsync** function, but it doesn’t work properly. In fact it generates an error (if I am using debugLayer) or just ignores me.

The lines below causes an error (I can see the error only if I toggle on the _debugLayer_);

```auto
import "@babylonjs/loaders/glTF";
import cubeMesh from '../../../assets/models/cube.glb';
...
const _squaredWalls = await SceneLoader.ImportMeshAsync('', '', cubeMesh, scene, undefined, '.glb');

```

 ![Screenshot_1](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/7/978b009d69c86f64c7b5076a54b64f30684adea3.png)

Also here is a video of the scene where I show the problem with the material: [BabylonJS: ImportMeshAsync function trouble](https://youtu.be/tAFfIO7Du8c).

The line below works, but I really do want to use gltf-loader and webpack ecosystem.

```auto
const _squaredWalls = await SceneLoader.ImportMeshAsync('', './models/', 'cube.glb', scene);

```

 ![Screenshot_2](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/9/e9abee062a60fb6344fd010f1be0c0adedfde166.png)

You can see that model was loaded using both approaches but using the gltf-loader variant it seems that it doesn’t have any materials.

Here is the webpack config: [(github)](https://github.com/LordLovelysmell/interior-constructor-frontend/blob/master/webpack.config.js)

Here is the Reactjs scene (was pretty much copied from doc): [(github)](https://github.com/LordLovelysmell/interior-constructor-frontend/blob/master/src/components/babylon/BasicScene/BasicScene.tsx)

P.S. I believe, this is my First day on the forums in the whole internet so you can congrats me with that atleast! 😃

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [February 13, 2023, 11:27pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188/2 "2023-02-13T23:27:31Z")

</div>

Welcome to the forum !!!

Let me add @RaananW our all build thinggies guru 🙂

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [February 14, 2023, 1:03pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188/3 "2023-02-14T13:03:09Z")

</div>

I’m not the build guru but you might want to check the guru’s example webpack config: [babylonjs-webpack-es6/webpack.common.js at master · RaananW/babylonjs-webpack-es6 (github.com)](https://github.com/RaananW/babylonjs-webpack-es6/blob/master/webpack.common.js) as it’s super useful reference 🤣

---

<div class="post-metadata">

**Author:** ![Shadowalker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shadowalker/32/29888_2.png) [@Shadowalker](https://forum.babylonjs.com/u/Shadowalker)\
**Post date:** [February 14, 2023, 1:13pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188/4 "2023-02-14T13:13:43Z")

</div>

Yes, I already have checked his webpack config about two days ago and this is almost the same as mine webpack-config.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [February 14, 2023, 1:16pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188/5 "2023-02-14T13:16:11Z")

</div>

If you will try to install and run your Github example you’ll have other errors which may give some clue to the problem.

---

<div class="post-metadata">

**Author:** ![Shadowalker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shadowalker/32/29888_2.png) [@Shadowalker](https://forum.babylonjs.com/u/Shadowalker)\
**Post date:** [February 14, 2023, 1:33pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188/6 "2023-02-14T13:33:53Z")

</div>

I think you mean that my current repository can’t be easily deployed locally. That’s because I also have a backend integration plus files like .env.

I can fix that if that would help you to help me 🙂 .

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [February 14, 2023, 1:44pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188/7 "2023-02-14T13:44:10Z")

</div>

Well, this line should work as it works here - [https://github.com/RaananW/babylonjs-webpack-es6/blob/master/src/scenes/loadModelAndEnv.ts#L67](https://github.com/RaananW/babylonjs-webpack-es6/blob/master/src/scenes/loadModelAndEnv.ts#L67) . So I believe it could be related to some webpack settings.

```auto
const _squaredWalls = await SceneLoader.ImportMeshAsync('', '', cubeMesh, scene, undefined, '.glb');

```

> [@Shadowalker](#):
>
> I can fix that if that would help you to help me 🙂 .

I cannot promise, I am not webpack expert, but I believe that it really could help others to help you 🙂

---

<div class="post-metadata">

**Author:** ![Shadowalker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shadowalker/32/29888_2.png) [@Shadowalker](https://forum.babylonjs.com/u/Shadowalker)\
**Post date:** [February 14, 2023, 1:58pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188/8 "2023-02-14T13:58:47Z")

</div>

Okay, I will fix that.

Also, [here is the video](https://youtu.be/tAFfIO7Du8c) on which you can see trouble with materials of the imported through gltf-loader model. Maybe this is important info.

---

<div class="post-metadata">

**Author:** ![Shadowalker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shadowalker/32/29888_2.png) [@Shadowalker](https://forum.babylonjs.com/u/Shadowalker)\
**Post date:** [February 14, 2023, 2:35pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188/9 "2023-02-14T14:35:18Z")

</div>

Now the repository is detached from .env and backend and the project can be easily installed.

**npm i**  
**npm run start**

[https://github.com/LordLovelysmell/interior-constructor-frontend](https://github.com/LordLovelysmell/interior-constructor-frontend)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [February 14, 2023, 4:32pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188/10 "2023-02-14T16:32:30Z")

</div>

So!

You are using the url loader, which converts certain files to base64, depending on their size (or your configuration). it’ll be much better to not use base64 and have webpack generate a real URL.

do that by setting the `limit` to false in the webpack config.

Now you are going to get a URL. But it is not a valid path (according to our loader :-)), bcause it starts with “/”. add a “.” before the file URL, and use the window.location.href as a server address and you are good to go:

```auto
 const _squaredWalls = await SceneLoader.ImportMeshAsync('', window.location.href, "." + cubeMesh, scene, undefined, '.glb');

```

of course that should depend on your use case and configuration, but now you have a working example.

---

<div class="post-metadata">

**Author:** ![Shadowalker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shadowalker/32/29888_2.png) [@Shadowalker](https://forum.babylonjs.com/u/Shadowalker)\
**Post date:** [February 14, 2023, 5:33pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188/11 "2023-02-14T17:33:39Z")

</div>

Thank you 🥹. With a little of jumping around I have managed to apply your fix suggestion.

```auto
 const _squaredWalls = await SceneLoader.ImportMeshAsync('', '', '.' + cubeMesh, scene, undefined, '.glb');

```

Above is working example, but I still don’t exactly understand WHY base64 does not work, and WHY [your own webpack-config](https://github.com/RaananW/babylonjs-webpack-es6/blob/master/webpack.common.js) is managing the base64 quite well.

Could you please explain it somehow?

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [February 14, 2023, 5:40pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188/12 "2023-02-14T17:40:47Z")

</div>

oh, base64 did work, but there was some weird issue with the texture. TBH - I haven’t debugged it. I can find the time later today or tomorrow to check

---

<div class="post-metadata">

**Author:** ![Shadowalker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shadowalker/32/29888_2.png) [@Shadowalker](https://forum.babylonjs.com/u/Shadowalker)\
**Post date:** [February 14, 2023, 5:47pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188/13 "2023-02-14T17:47:35Z")

</div>

I would highly appreciate it if you look at the code later. The bugged code is at the branch named **import-mesh-async-error** , but I made it default branch in repository so you can just clone the repo.

Thank you in advance.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [February 15, 2023, 3:31pm UTC](https://forum.babylonjs.com/t/unable-to-import-glb-model-locally-using-webpack-ecosystem/38188/14 "2023-02-15T15:31:54Z")

</div>

your problem is more of a react-issue.

You are initializing the scene (and engine) twice. and you load the model twice. the difference between base64 and a URL is that the URL is loaded async, whilc base64 is synchronous. And since the engine and scene is not yet ready loading the model does not work as expected. If you only load in the 2nd scene (not the best solution):

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/1/b186a6584c590e0fcc2cd5be7c0ffffe916d5517.png)

Check why your scene initializes twice. Feels like something is wrong with the Route (as it renders the dashboard a few times), but i’ll leave it to you to fix that part in the project