执行npm audit fix --force后Next.js项目SVG文件缺少loader报错求助

问题根因 #

• next.config.js配置不符合Next.js规范：Next.js不支持直接在导出配置的根节点写entry、module这类原生webpack配置，必须通过内置的webpack钩子注入自定义规则，你写的SVG处理规则完全没有生效。
• 依赖版本冲突：npm audit fix --force强制升级了部分依赖，原本适配的file-loader、babel-plugin-inline-react-svg和Next.js 10的内置资源处理逻辑出现兼容问题。
• 配置冗余冲突：你已经安装了专门处理静态资源的next-images依赖，又单独配置了file-loader，二者规则重叠导致加载器优先级异常。

解决方案 #

步骤1：修正next.config.js配置 #

替换你当前的next.config.js内容为以下代码：

const withImages = require('next-images')

module.exports = withImages({
  reactStrictMode: true,
  webpack(config, options) {
    // 清除Next.js内置的SVG处理规则，避免冲突
    config.module.rules = config.module.rules.map(rule => {
      if (rule.test && rule.test.toString().includes('svg')) {
        return { ...rule, exclude: /\.svg$/i }
      }
      return rule
    })
    // 注入自定义静态资源处理规则
    config.module.rules.push({
      test: /\.(png|jpe?g|svg|gif)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: 'images/[hash]-[name].[ext]',
            publicPath: '/_next/static',
            outputPath: 'static/images',
            esModule: false
          }
        }
      ]
    })
    return config
  }
})

步骤2：补充Babel配置（如果需要将SVG作为React组件导入） #

在项目根目录新建.babelrc文件，写入以下配置：

{
  "presets": ["next/babel"],
  "plugins": ["inline-react-svg"]
}

步骤3：清理缓存重新安装依赖 #

• 删除项目根目录下的node_modules文件夹和package-lock.json文件
• 执行npm install重新安装所有依赖
• 执行npm run dev重启项目即可

可选简化方案 #

如果你只需要把SVG作为普通图片使用，不需要转成React组件，可直接移除file-loader和babel-plugin-inline-react-svg依赖，仅保留next-images即可正常加载SVG资源，无需额外配置loader。也可以直接将SVG文件放到项目的public目录下，通过路径直接引用，比如<img src="/your-svg-file.svg" />。

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