NextJS中使用SVGR加载SVG组件失败问题求助

问题情况 #

昨晚SVG组件还能正常加载，今天突然失效，期间没改任何代码，SVG文件在第三方查看器能正常渲染，怀疑是SVGR相关问题。控制台报错：

Image is missing required "src" property: <img alt="JavaScript" src width="50" height="50" decoding="async" data-nimg="1" class loading="lazy" style="color:transparent">
window.console.error @ next-dev.js?3515:20

已尝试SVGR仓库高赞方案，把@svgr/webpack从devDependencies移到dependencies，都没解决。

相关配置与代码 #

依赖配置 #

"dependencies": {
    "daisyui": "^2.46.0",
    "next": "13.0.5",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@svgr/webpack": "^6.5.1",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.19",
    "tailwindcss": "^3.2.4",
    "tailwindcss-animate": "^1.0.5"
  }

next.config.js配置 #

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

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

示例代码 #

import JavaScript from "../public/javascript.svg";

<div className="tooltip" data-tip="JavaScript">
<Image src={JavaScript} alt="JavaScript" height={50} width={50} className=""></Image>
</div>

SVG内容 #

<?xml version="1.0" ?>
<svg  fill="stroke" viewBox="100 100 375 375" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet">
    <title />
    <path 
        d="M32,32V480H480V32ZM272,380c0,43.61-25.76,64.87-63.05,64.87-33.68,0-53.23-17.44-63.15-38.49h0l34.28-20.75c6.61,11.73,11.63,21.65,26.06,21.65,12,0,21.86-5.41,21.86-26.46V240h44Zm99.35,63.87c-39.09,0-64.35-17.64-76.68-42h0L329,382c9,14.74,20.75,24.56,41.5,24.56,17.44,0,27.57-7.72,27.57-19.75,0-14.43-10.43-19.54-29.68-28l-10.52-4.52c-30.38-12.92-50.52-29.16-50.52-63.45,0-31.57,24.05-54.63,61.64-54.63,26.77,0,46,8.32,59.85,32.68L396,290c-7.22-12.93-15-18-27.06-18-12.33,0-20.15,7.82-20.15,18,0,12.63,7.82,17.74,25.86,25.56l10.52,4.51c35.79,15.34,55.94,31,55.94,66.16C441.12,424.13,411.35,443.87,371.35,443.87Z" />

</svg>

1. 修复next.config.js的导出错误 #

你现在的配置文件里写了两次module.exports，后面的配置会完全覆盖前面的，导致原有的reactStrictMode没生效，还可能让SVGR的规则出问题。把配置合并成一个：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })
    return config
  },
};

module.exports = nextConfig;

2. 正确使用SVGR导入的SVG #

用SVGR导入SVG时，得到的是React组件，不是图片路径，所以不能直接塞给Next.js的Image组件当src。两种解决办法：

直接渲染SVG组件

import JavaScript from "../public/javascript.svg";

<div className="tooltip" data-tip="JavaScript">
  <JavaScript height={50} width={50} />
</div>

保留Image组件（跳过SVGR）

如果非要用Image，导入时加前缀跳过SVGR处理，直接拿资源路径：

import javascriptUrl from "!url-loader!../public/javascript.svg";

<div className="tooltip" data-tip="JavaScript">
  <Image src={javascriptUrl} alt="JavaScript" height={50} width={50} />
</div>

3. 清理缓存重启服务 #

缓存经常搞事情，试试清掉Next.js缓存再重启：

rm -rf .next
npm run dev

要是还不行，就把node_modules和lock文件也删了重装：

rm -rf node_modules package-lock.json
npm install
npm run dev

4. 修复SVG里的无效属性 #

你的SVG里fill="stroke"是错误的，fill属性得是颜色值、none或者currentColor，改成fill="currentColor"或者具体颜色，避免渲染异常：

<svg fill="currentColor" viewBox="100 100 375 375" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">

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