Next.js 15.0.3 + Turbopack配置raw-loader加载WebGL着色器失败求助

核心问题 #

你的Turbopack规则配置存在两处关键错误：

• 正则表达式被包裹为字符串，Turbopack无法正确解析匹配规则
• 未声明as: 'raw'，Turbopack无法识别加载后文件的类型

修正后的next.config.ts #

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  sassOptions: {
    silenceDeprecations: ['legacy-js-api'],
  },
  experimental: {
    turbo: {
      useSwcCss: true,
      rules: {
        '*.comp.svg': {
          loaders: ['@svgr/webpack'],
          as: 'component',
        },
        // 使用原生正则表达式匹配着色器文件后缀，添加as: 'raw'指定输出类型
        /\.(glsl|vs|fs|vert|frag)$/: {
          loaders: ['raw-loader'],
          as: 'raw',
        },
      },
    },
  },
};

export default nextConfig;

补充TypeScript类型声明 #

由于TypeScript无法识别自定义后缀的文件，需在项目根目录创建类型声明文件（如shaders.d.ts）：

declare module '*.glsl' {
  const content: string;
  export default content;
}

declare module '*.vs' {
  const content: string;
  export default content;
}

declare module '*.fs' {
  const content: string;
  export default content;
}

declare module '*.vert' {
  const content: string;
  export default content;
}

declare module '*.frag' {
  const content: string;
  export default content;
}

额外注意事项 #

• 移除之前添加的webpack配置：使用Turbopack时，webpack规则不会生效，无需保留
• 确保已正确安装raw-loader作为开发依赖：

  npm install -D raw-loader
  # 或 yarn add -D raw-loader
  # 或 pnpm add -D raw-loader
  

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