whatisjery
Production build fails with missing GLSL module declarations even with unmodified example files
I’m using the example files provided in the repository without making any modifications. The development server runs perfectly, but when I run the production build (using npm run build, which executes tsc && vite build), I get errors like:
lib/effect/FluidEffect.tsx:6:28 - error TS2307: Cannot find module '../glsl/post.frag' or its corresponding type declarations. 6 import fragmentShader from '../glsl/post.frag';
lib/hooks/useMaterials.tsx:6:24 - error TS2307: Cannot find module '../glsl/base.vert' or its corresponding type declarations. 6 import baseVertex from '../glsl/base.vert';
...
Similar errors occur for other GLSL files (e.g., .vert files).
Since I haven’t changed any of the example code, it appears that while the Vite development server (with its GLSL plugin) correctly handles these files, the production build fails during the TypeScript compilation step due to missing module declarations.
Steps I’ve Tried: • Verified that the glsl.d.ts file (declaring modules for *.glsl, *.frag, and *.vert) is present in the project root and included in tsconfig.json. • Confirmed that all file paths and casing are correct. • Adjusted tsconfig.json settings (including include paths and typeRoots adjustments), but none of these changes resolve the issue.
Question: Has anyone encountered this problem with the production build? Is there a recommended configuration adjustment to ensure that TypeScript can resolve these GLSL files during the production build process?
My environment: • Node.js version: [22.14.0] • npm version: [10.9.2] • OS: [windows 11] • React version: [19.0.0] • Using Vite with vite-plugin-glsl
Thanks in advance for your help!
@velawoo Thanks for reporting this, I've moved the GLSL type declarations, it should be fixed in v1.4.4. Let me know if it works for you.
Since I haven’t changed any of the example code, it appears that while the Vite development server (with its GLSL plugin) correctly handles these files, the production build fails during the TypeScript compilation step due to missing module declarations.
The type declaration (glsl.d.ts) needed to be in the lib folder so TypeScript could pick it up during the production step, and it wasn’t included, which is why the build failed.
