NextJS导入GLSL着色器报错：如何验证Webpack loader是否正常工作

• 在next.config.js的webpack配置函数内打印当前规则列表，示例如下：

webpack: (config, {}) => {
  // 新增这行，启动dev服务时终端会输出匹配到的GLSL规则
  console.log('GLSL规则配置：', config.module.rules.find(rule => rule.test.toString().includes('glsl')))
  // 原有规则不变
  config.module.rules.push({
    test: /\.(glsl|vs|fs|vert|frag)$/,
    use: { loader: 'raw-loader' }
  })
  return config
}

启动开发服务后查看终端输出，如果能匹配到你添加的GLSL规则，说明规则已被注入到Webpack配置中。

• 确认依赖已正确安装：执行npm list raw-loader，如果返回版本号说明安装成功，没有的话需要执行npm install raw-loader --save-dev完成安装。
• 验证规则匹配：可以临时将一个txt文件放入和GLSL文件相同的目录，在Webpack配置中添加txt后缀到GLSL的匹配规则中，尝试导入txt文件，如果能正常读取内容，说明loader本身工作正常，问题出在文件路径或者后缀匹配上。
• 所有Webpack配置修改后必须重启NextJS开发服务才会生效，确认你修改配置后已经重启服务。

你当前报错的核心原因是GLSL文件存放在了public目录下，NextJS默认不会对public目录内的文件做Webpack打包处理，只会将其作为静态资源直接对外提供访问路径，因此你配置的loader规则不会匹配到这个目录下的文件。可选择以下两种方案解决：

方案一：调整文件存放路径（推荐） #

1. 移出public目录：在项目根目录（如果使用src结构则放在src目录下）新建shaders文件夹，将所有GLSL文件移动到该目录下，例如路径调整为./shaders/blob/vertex.glsl。
2. 客户端组件标注：如果使用NextJS 13+的App Router，所有使用GLSL、ThreeJS的组件都是客户端组件，需要在文件顶部添加'use client'指令。
3. 测试导入：在组件内直接导入GLSL文件即可获取到着色器文本内容，示例：

import vertexShader from '@/shaders/blob/vertex.glsl'
// 打印可看到完整的着色器代码
console.log(vertexShader)

方案二：保留public目录存储GLSL #

如果不想修改文件存放路径，不需要配置任何Webpack loader，直接通过fetch请求静态资源路径获取着色器内容即可：

const getVertexShader = async () => {
  const res = await fetch('/shaders/blob/vertex.glsl')
  return res.text()
}

如果你需要GLSL模块化导入、语法预处理等能力，可以替换raw-loader为glslify相关loader，Webpack配置修改为：

config.module.rules.push({
  test: /\.(glsl|vs|fs|vert|frag)$/,
  use: ['raw-loader', 'glslify-loader']
})

之后安装对应的依赖即可使用。

内容的提问来源于stack exchange，提问作者Gabriel Roda Eugen Bach