NextJS & SVGR loading SVG as component breaks SVG

Question

"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"

The SVG's worked last night, now today fails to load. Nothing was changed within that time. SVG still renders in "SVG Viewer" websites. Assuming this is an SVGR issue.

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
  },
};

Example code

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>

Console Error Code

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

Attempted all the high liked posts within SVGR Github

https://github.com/vercel/next.js/issues/26130

I've also attempted moving the @svgr/webpack npm package to dependencies instead of devDependencies to see maybe if it's a runtime issue but it didn't effect.

Answer 1

Yes, this is a svgr issue. When you add svgr to your webpack config, this is overwrite nextjs statically imported behavior. Normally in the nextjs, the import result is like

{ src: string, width?: number, height?: number }

but when svgr is included, the import result turns into a react component.