Next.js项目中SVGR加载SVG失败：模块无法解析求助

1. 先确认文件路径是否正确 #

错误核心是webpack找不到指定的SVG文件，和SVGR配置本身无关，优先排查路径问题：

• 若你的项目结构是项目根目录/images/icons/pizza.svg，而index.js在pages/文件夹下，绝对路径/images/icons/pizza.svg会被webpack解析为系统根目录而非项目根目录，这是错误的。
• 改用相对路径：比如../images/icons/pizza.svg，让webpack从当前pages/目录向上回溯找到SVG文件。
• 若想用绝对路径，可在jsconfig.json或tsconfig.json中配置baseUrl：

  {
    "compilerOptions": {
      "baseUrl": "."
    }
  }
  

  之后就能用import Pizza from "images/icons/pizza.svg";这样的路径导入。

2. 检查SVGR依赖是否安装 #

确保已经执行了依赖安装命令：

npm install @svgr/webpack --save-dev
# 或
yarn add @svgr/webpack --dev

若安装过程有报错，重新执行并确认依赖已添加到package.json中。

3. 重启开发服务器 #

修改next.config.js后必须重启Next.js开发服务器，否则配置不会生效，这是容易忽略的关键点。

4. 验证文件本身是否存在 #

• 确认pizza.svg确实在指定文件夹中，检查文件名大小写（Linux/macOS区分大小写，Windows不区分），避免拼写错误（比如把pizza.svg写成Pizza.svg）。

5. 核对next.config.js配置 #

你的配置本身是正确的，可再检查一遍语法：

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ["@svgr/webpack"],
    });
    return config;
  },
};

确保没有括号、逗号遗漏等语法错误。

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