在React/TypeScript项目中用Craco加载GLSL着色器失败排查

从错误日志能明显看出核心问题：GLSL代码里混入了文件路径字符串/static/media/vertexPars.8e8f9976be7cf7583304.glsl，直接导致编译报错。这说明webpack没有正确用webpack-glsl-loader解析GLSL文件，反而把它当成静态资源处理，把生成的哈希文件名拼到了代码末尾。

解决步骤 #

1. 修正Craco的Webpack配置 #

在craco.config.js中添加type: 'javascript/auto'，禁用Create React App默认的Asset Modules处理逻辑，让自定义loader接管GLSL文件：

module.exports = {
  webpack: {
    module: {
      rules: [
        {
          test: /\.glsl$|\.frag$|\.vert$/i,
          type: 'javascript/auto', // 跳过默认资源处理，让loader解析文件内容
          use: ['webpack-glsl-loader'],
        },
      ],
    },
  },
};

2. 备选方案：替换为raw-loader #

如果webpack-glsl-loader和当前CRA版本兼容性不佳，可以改用raw-loader直接导出文件内容字符串：

• 安装依赖：npm install raw-loader --save-dev
• 修改Craco配置：

module.exports = {
  webpack: {
    module: {
      rules: [
        {
          test: /\.glsl$|\.frag$|\.vert$/i,
          type: 'javascript/auto',
          use: ['raw-loader'],
        },
      ],
    },
  },
};

3. 确保TypeScript声明文件生效 #

确认declaration.d.ts放在src目录下，或者在tsconfig.json的include数组中添加该文件的路径，保证TypeScript能识别GLSL模块的导入。

原因说明 #

Create React App默认会将非代码类文件（如图片、字体）作为静态资源处理，生成带哈希的文件名并输出到static/media目录。你的GLSL文件被这套逻辑接管后，webpack没有执行webpack-glsl-loader去读取文件内容，反而把生成的文件名路径追加到了代码里，导致GLSL编译器遇到非法语法报错。添加type: 'javascript/auto'可以强制webpack使用自定义loader处理这类文件，而不是当作静态资源。

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