Error: Can not resolve #include <three_msdf_attributes>

[robksawyer]

When running this in NextJS, I'm getting the following error. Any ideas how to resolve this? Maybe transpile the module?

Error: Can not resolve #include <three_msdf_attributes>

[FackJox]

Just in case it helps anyone else - a workaround I found was to copy the MSDFTextGeometry and MSDFTextMaterial to somewhere in your src folder and import them manually from there.

[leochocolat]

three_msdf_attributes is a custom shader chunk I created along with many others.

All the chunks available should be inside the THREE.ShaderChunk object.

I just reproduced the issue on my side and for some reason using Next.js the THREE.ShaderChunk.three_msdf_attributes is undefined on client side but defined as it should on server side. That's why three.js replace function can't find it when compiling the shader client side...

I never used Next.js so at the moment I'm not able to fix this properly but I'm open for suggestions from Next.js experts! :)

In the meantime I suggest following @FackJox way or creating your own shader material and shader without using the chunks : See example

Hope it helps!

[m-shum]

MSDFTextGeometry an

@FackJox If you have a moment, would you be able to note how you did this? I'm having the same issue with a Vue project but I'm not sure which of those chunk components I need to get together.

[bennyzen]

For those of you that use Vite, one of my tmp fixes was to just append ?raw to all *.glsl imports in /src/MSDFTextMaterial/shaderChunks/index.js as described here.

[pr-o]

three_msdf_attributes is a custom shader chunk I created along with many others.

All the chunks available should be inside the THREE.ShaderChunk object.

I just reproduced the issue on my side and for some reason using Next.js the THREE.ShaderChunk.three_msdf_attributes is undefined on client side but defined as it should on server side. That's why three.js replace function can't find it when compiling the shader client side...

I never used Next.js so at the moment I'm not able to fix this properly but I'm open for suggestions from Next.js experts! :)

In the meantime I suggest following @FackJox way or creating your own shader material and shader without using the chunks : See example

Hope it helps!

This helped. Wrote my custom shader code on top of these GLSL files and the shader program runs fine on my Next.js project 👐

[leochocolat]

Hi all,

I completely removed the custom shader chunks from the lib since I found it a bit confusing and it was kind of hiding the thinks that were happening in the shaders...

Since this issue was related to shader chunks, it is fixed and will be closed!

Cheers ✌️

[pr-o]

Thanks, Leo!