# CustomMaterial error due to missing shader code

**URL:** <https://forum.babylonjs.com/t/custommaterial-error-due-to-missing-shader-code/53699>\
**Category:** Bugs\
**Created:** [September 24, 2024, 11:15am UTC](https://forum.babylonjs.com/t/custommaterial-error-due-to-missing-shader-code/53699 "2024-09-24T11:15:33Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![alvov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alvov/32/2061_2.png) [@alvov](https://forum.babylonjs.com/u/alvov)\
**Post date:** [September 24, 2024, 11:15am UTC](https://forum.babylonjs.com/t/custommaterial-error-due-to-missing-shader-code/53699/1 "2024-09-24T11:15:34Z")

</div>

_Note: I can’t reproduce it in PG because shader code is not being asynchronously loaded there._

If application includes Babylon.js modules with ES6 imports, then using `CustomMaterial` like this:

```auto
someMesh.material = new CustomMaterial("custom_mat", scene);

```

triggers an error of `Cannot read properties of undefined (reading 'replace')` at line [Babylon.js/packages/dev/materials/src/custom/customMaterial.ts at 865f503e7ed1bcba3bec008733e76f21aa30b8a7 · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/blob/865f503e7ed1bcba3bec008733e76f21aa30b8a7/packages/dev/materials/src/custom/customMaterial.ts#L251)

Same thing concerns `PBRCustomMaterial` as well.

`Effect.ShadersStore["defaultVertexShader"]` seems to be undefined at this point, because `default.vertex.js` hasn’t been loaded and run yet (same for fragment/pixel shader).

Does `CustomMaterial` support asynchronous shader code yet, or maybe I’m doing something wrong?..

Thank you.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 24, 2024, 11:30am UTC](https://forum.babylonjs.com/t/custommaterial-error-due-to-missing-shader-code/53699/2 "2024-09-24T11:30:29Z")

</div>

cc @Deltakosh in case this is related to recent changes where shader code is loaded on demand.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [September 24, 2024, 4:12pm UTC](https://forum.babylonjs.com/t/custommaterial-error-due-to-missing-shader-code/53699/3 "2024-09-24T16:12:01Z")

</div>

Yes this is expected if you are not using ESM.  
The way to fix it is to preimport the shaders  
If you add these lines to your code, it should work:

```auto
import from "core/Shaders/default.vertex";
import from "core/Shaders/default.fragment";

```

cc @RaananW to keep me honest 🙂

---

<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:** [September 24, 2024, 9:38pm UTC](https://forum.babylonjs.com/t/custommaterial-error-due-to-missing-shader-code/53699/4 "2024-09-24T21:38:35Z")

</div>

Should be:

import “@babylonjs/core/Shaders/default.vertex”;  
import “@babylonjs/core/Shaders/default.fragment”;

Might make sense to add that to the custom material if it requires it to work correctly

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [September 24, 2024, 10:39pm UTC](https://forum.babylonjs.com/t/custommaterial-error-due-to-missing-shader-code/53699/5 "2024-09-24T22:39:12Z")

</div>

Totally ! I’ll do a PR for this one and the PBRCustomMaterial

---

<div class="post-metadata">

**Author:** ![alvov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alvov/32/2061_2.png) [@alvov](https://forum.babylonjs.com/u/alvov)\
**Post date:** [September 25, 2024, 7:42am UTC](https://forum.babylonjs.com/t/custommaterial-error-due-to-missing-shader-code/53699/6 "2024-09-25T07:42:02Z")

</div>

wait, but wouldn’t it make CustomMaterial unusable with WGSL shaders?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [September 25, 2024, 8:35am UTC](https://forum.babylonjs.com/t/custommaterial-error-due-to-missing-shader-code/53699/7 "2024-09-25T08:35:52Z")

</div>

CustomMaterial is forcing the shaders to used glsl even in webgpu (I introduced a toggle for that)

---

<div class="post-metadata">

**Author:** ![alvov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alvov/32/2061_2.png) [@alvov](https://forum.babylonjs.com/u/alvov)\
**Post date:** [September 25, 2024, 9:08am UTC](https://forum.babylonjs.com/t/custommaterial-error-due-to-missing-shader-code/53699/8 "2024-09-25T09:08:11Z")

</div>

oh, the `forceGLSL`. Sorry, missed that one 🙇‍♂️