reactjs NextJS & SVGR在组件中断SVG时加载SVG

v9tzhpje  于 2023-02-18  发布在  React
关注(0)|答案(1)|浏览(129)
"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"

昨天晚上的SVG工作,现在今天无法加载。在这段时间内没有任何变化。SVG仍然呈现在“SVG查看器”网站。假设这是一个SVGR的问题。
Broken Photo picture
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>

控制台错误代码

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 Github中所有高赞帖子
https://github.com/vercel/next.js/issues/26130
我还尝试将@svgr/webpack npm包移到dependencies而不是devDependencies,以查看它是否是运行时问题,但没有效果。

wfsdck30

wfsdck301#

是的,这是一个svgr问题。当你把svgr添加到你的webpack配置中时,这是覆盖nextjs * 静态导入 * 行为。通常在nextjs中,导入结果类似于{ src: string, width?: number, height?: number },但是当包含svgr时,导入结果变成了一个react组件。

相关问题