Vite项目导入GLSL文件报错，求问题排查与解决方法

错误根源 #

Vite默认会把.glsl文件当作JS模块解析，但GLSL代码不属于JS语法范畴，自然会触发语法报错。

快速解决：用?raw后缀导入原始文本 #

修改你的导入语句，加上?raw后缀，让Vite直接返回文件的原始字符串内容：

import fragment from './shaders/fragment.glsl?raw'

长期方案：配置GLSL插件支持 #

如果项目里会频繁用到GLSL文件，推荐安装插件让Vite原生支持：

1. 安装依赖：

npm install vite-plugin-glsl --save-dev

2. 修改vite.config.js：

import { defineConfig } from 'vite'
import glsl from 'vite-plugin-glsl'

export default defineConfig({
  plugins: [glsl()]
})

配置完成后，你原来的导入写法就可以正常工作了。

额外修正：ShaderMaterial的配置错误 #

你代码里的side属性放错位置了，它是ShaderMaterial的顶层配置项，不是uniforms的子属性，调整后：

this.material = new THREE.ShaderMaterial({
  fragmentShader: fragment,
  uniforms: {
    progress: {
      type: 'f',
      value: 0,
    }
  },
  side: THREE.DoubleSide
})

内容的提问来源于stack exchange，提问作者Lauenborg