Next.js 15导入自定义SVG图标报错，请求排查原因

核心原因 #

你的Webpack配置中，只有当SVG导入语句带有?react查询参数时，才会触发@svgr/webpack将其转换为React组件。但你当前的导入语句没有添加该参数，所以SVG被默认的asset/resource规则处理，返回的是静态资源路径对象，而非可渲染的React组件，这就导致了"type is invalid"错误。

解决办法 #

方法1：导入时添加?react参数

直接在导入SVG时加上查询参数，让Webpack匹配到@svgr/webpack规则：

import BriefcaseIcon from '@/icons/briefcase.svg?react';

方法2：修改Webpack配置，让图标目录默认用@svgr处理

如果不想每次导入都加参数，可以调整规则，指定特定目录下的SVG直接用@svgr/webpack处理：

export default {
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.shopify.com',
        pathname: '/s/files/**'
      }
    ]
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      oneOf: [
        {
          include: /app\/assets\/icons/, // 匹配你的图标目录
          use: ['@svgr/webpack']
        },
        {
          type: 'asset/resource' // 其他SVG作为静态资源处理
        }
      ]
    });

    return config;
  }
};

修改后，直接导入@/icons/briefcase.svg就会自动转换为React组件。

方法3：检查路径别名配置

你使用了@/icons/的别名导入，需要确保next.config.mjs中配置了正确的路径别名，否则导入路径可能指向错误文件，导致规则不匹配：

import path from 'path';

export default {
  // 其他配置...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './'),
      '@/icons': path.resolve(__dirname, './app/assets/icons'),
    },
  },
  // webpack配置...
};

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