# Unable to compile effect - shader compilation error - html shown in output of vertex code

**URL:** <https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465>\
**Category:** Questions\
**Tags:** shader\
**Created:** [January 4, 2022, 7:25pm UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465 "2022-01-04T19:25:15Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![MCArth](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mcarth/32/15968_2.png) [@MCArth](https://forum.babylonjs.com/u/MCArth)\
**Post date:** [January 4, 2022, 7:25pm UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465/1 "2022-01-04T19:25:15Z")

</div>

Hi, I’ve upgraded to the latest release 5.0.0-alpha.65, and am encountering some errors in the console, output from `Effect._processCompilationErrors`

Weirdly, the html of my page is shown in the output of the vertex code. Not sure if this is a bug or something that’s changed that I need to fix in the new version/s, my app worked fine in bjs 4.

Output in console:

> **[index.js:1451 BJS - \[19:05:55\]: Unable to compile effect:console. @ -...](https://pastebin.com/p3HDcRm1)**
>
> Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

Thanks!

---

<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:** [January 4, 2022, 7:30pm UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465/2 "2022-01-04T19:30:36Z")

</div>

your shader code contains html which seems to mean it is trying to download it from a server for some reasons 😑

Could you provide a repro of the issue ? I can not think of any related changes so far

---

<div class="post-metadata">

**Author:** ![MCArth](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mcarth/32/15968_2.png) [@MCArth](https://forum.babylonjs.com/u/MCArth)\
**Post date:** [January 4, 2022, 9:38pm UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465/3 "2022-01-04T21:38:57Z")

</div>

Yep, my dev server responds to unknown routes with the index - I should have thought to check network logs 🙂

The two shaders being requested are [http://localhost:3000/src/Shaders/postprocess.vertex.fx](http://localhost:3000/src/Shaders/postprocess.vertex.fx) and [http://localhost:3000/src/Shaders/rgbdDecode.fragment.fx](http://localhost:3000/src/Shaders/rgbdDecode.fragment.fx)

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

It seems a glb import is the culprit, being imported like so:

```auto
SceneLoader.ImportMesh(
	"",
	`/static/models/basic_char.glb`,
	null,
	scene,
	(meshes, particleSystems, skeletons, animationGroups) => {
             ...
       })

```

Though I wasn’t able to reproduce in the playground 😕

This is the initiator for both:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/d/5d9203f9424f82218f61b0ca494d70deb9faf065.png)

Anyway, if nothing is obvious from this, I’ll have more of a dig tomorrow

---

<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:** [January 4, 2022, 9:50pm UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465/4 "2022-01-04T21:50:02Z")

</div>

Yup this is like the RGBDPostProcess shader is not part of your package for some reasons … I can not think about why ☹ If you can share a git repo or equivalent I can have a look

---

<div class="post-metadata">

**Author:** ![MCArth](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mcarth/32/15968_2.png) [@MCArth](https://forum.babylonjs.com/u/MCArth)\
**Post date:** [January 5, 2022, 10:58am UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465/5 "2022-01-05T10:58:20Z")

</div>

Is there some file that has the side effect of adding the shaders to the shaderstore? I tried to dig into the code but couldn’t find where this is done. The shaders themselves seem to be included, a breakpoint I set inside the generated rgbdDecode.fragment.js is being hit.

The shader store only has 4 shaders, which doesn’t seem quite right:

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/7/a73519fb3007bb62802550b38390ef6e271ed603.png)

I’m also getting the same issue with the following shaders:

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/9/79e83146cc7b688bba492ce0afa2480f91ffdb3a.png)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/0/803ad9020ad30438924e0740c662ea6c32fe088e.png)

I can add you to my repo, but setup of the project isn’t the quickest - let me know if anything pops out from the above info

---

<div class="post-metadata">

**Author:** ![MCArth](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mcarth/32/15968_2.png) [@MCArth](https://forum.babylonjs.com/u/MCArth)\
**Post date:** [January 5, 2022, 2:15pm UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465/6 "2022-01-05T14:15:46Z")

</div>

I’ve been able to fix this with `import "@babylonjs/core/Materials/PBR/pbrBaseMaterial"`

---

<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:** [January 5, 2022, 3:01pm UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465/7 "2022-01-05T15:01:14Z")

</div>

w000t this is strange cause if you have a pbr material in your scene this `import "@babylonjs/core/Materials/PBR/pbrBaseMaterial"` should happen for you ☹ but I am glad it is working now.

---

<div class="post-metadata">

**Author:** ![MCArth](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mcarth/32/15968_2.png) [@MCArth](https://forum.babylonjs.com/u/MCArth)\
**Post date:** [January 5, 2022, 3:21pm UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465/8 "2022-01-05T15:21:58Z")

</div>

Maybe I can help debug, where should that come in from? As I don’t see it at the top level of any of the gltf files

But perhaps it is caused by my quite selective importing of

```auto
import "@babylonjs/loaders/glTF/2.0"
import "@babylonjs/loaders/glTF/glTFFileLoader"
import "@babylonjs/loaders/glTF/glTFValidation"

```

in an attempt to reduce package size

---

<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:** [January 5, 2022, 3:47pm UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465/9 "2022-01-05T15:47:34Z")

</div>

the gltf files imports pbrMaterial files which are importing the base one hence why I am not understanding it.

---

<div class="post-metadata">

**Author:** ![MCArth](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mcarth/32/15968_2.png) [@MCArth](https://forum.babylonjs.com/u/MCArth)\
**Post date:** [January 5, 2022, 3:58pm UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465/10 "2022-01-05T15:58:40Z")

</div>

Oh yes, indeed - that is confusing. Well, perhaps some setup issues in my project, good it is fixed now

Thanks for the help 🙂

---

<div class="post-metadata">

**Author:** ![Anandu\_Omanakuttan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anandu_omanakuttan/32/27747_2.png) [@Anandu\_Omanakuttan](https://forum.babylonjs.com/u/Anandu_Omanakuttan)\
**Post date:** [October 25, 2022, 12:17pm UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465/11 "2022-10-25T12:17:29Z")

</div>

Could you please explain your setup changes. Sometimes it works for me.

 ![Screenshot 2022-10-25 174648](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/6/263c2b63688195c0bde0e93849eabac045dcfdb4.png)  
it is a react project .

---

<div class="post-metadata">

**Author:** ![MCArth](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mcarth/32/15968_2.png) [@MCArth](https://forum.babylonjs.com/u/MCArth)\
**Post date:** [October 25, 2022, 12:36pm UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465/12 "2022-10-25T12:36:20Z")

</div>

If I recall correctly (a pretty big if) I have a peer dependency which was code split at the time. For whatever reason, side effects would / wouldn’t take effect depending on whether I imported them inside the peer dependency or my main codebase.

I never really got to the bottom of it but try moving the imports around - writing it out sounds like it was an ordering issue

---

<div class="post-metadata">

**Author:** ![MCArth](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mcarth/32/15968_2.png) [@MCArth](https://forum.babylonjs.com/u/MCArth)\
**Post date:** [November 17, 2023, 2:30pm UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465/13 "2023-11-17T14:30:32Z")

</div>

Had another ShaderStore issue and got to the bottom of it this time.

I have a dependency which has a peerDependency of babylon in its package.json. My main package also has babylon as a dependency. Babylon was installed in the node\_modules folder of both my main package and the dependency. This meant sometimes two separate copies of the same file were being included and ran in the final build.

In this case, it was shaderStore.js from both my package and the dependency being included. This meant there were two ShaderStore objects and two ShaderStore.ShadersStore objects.

The fix was just to delete the installed babylon in my dependencies node\_module’s folder which let npm always resolve to the babylon in my main package’s node\_modules folder.

---

<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:** [November 20, 2023, 10:40pm UTC](https://forum.babylonjs.com/t/unable-to-compile-effect-shader-compilation-error-html-shown-in-output-of-vertex-code/26465/14 "2023-11-20T22:40:57Z")

</div>

Thanks for letting us know as it is definitely not obvious and can help somebody else.