Next.js 15 + Turbopack构建失败：SVG导入本地正常打包报错

问题原因 #

本地开发时Turbopack能正确将SVG转换为React组件，但生产构建（next build）中配置未生效，导致SVG导入后是对象而非组件，触发「元素类型无效」错误。

解决方案 #

1. 调整Turbopack配置，强制@svgr导出默认组件 #

修改next.config.ts，给@svgr/webpack添加exportType选项，确保生产构建时正确导出React组件：

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: [
          {
            loader: '@svgr/webpack',
            options: {
              exportType: 'default', // 明确指定默认导出为组件
            },
          },
        ],
        as: '*.js',
      },
    },
  },
};

export default nextConfig;

2. 避免SVG放在public目录 #

public目录下的文件默认被Next.js当作静态资源处理，可能和@svgr的转换逻辑冲突。建议将SVG图标移到src/assets/icons这类非public目录下，修改导入路径：

// 原路径：import File from "../../public/globe.svg";
import File from "../assets/icons/globe.svg"; // 新路径

export default function Home() {
  return (
    <div>
      <File/>
    </div>
  );
}

3. 确保@svgr/webpack版本兼容 #

执行以下命令更新到最新兼容版本：

npm install @svgr/webpack@latest --save-dev

验证修复 #

执行next build和next start，确认页面能正常渲染SVG图标，无预渲染报错。

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