React 17升级至18后SVG渲染失效的解决方案咨询

问题背景 #

我在React组件中通过以下方式使用SVG：

import logo from './logo.svg';
// 然后在JSX中
<img src={logo} alt="logo"/>

该方式在React 17下运行正常，但升级至React 18后出现编译错误：

Compiled with problems:X

ERROR in ./src/logo.svg

Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
   5 |   ...props
   6 | }, svgRef) {
>  7 |   return <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="131.16136mm" height="95.620743mm" viewBox="0 0 464.74498 338.81365" id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="surfing-js.svg" inkscape:export-filename="F:\\dev\\graphics\\gophers\\svg-rasterized\\surfing-js.png" inkscape:export-xdpi={134.17} inkscape:export-ydpi={134.17} ref={svgRef} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs id="defs4"><linearGradient inkscape:collect="always" id="linearGradient4289"><stop style={{
     |               ^^^^^^^^
   8 |           stopColor: "#00dce2",
   9 |           stopOpacity: 1
  10 |         }} offset={0} id="stop4291" /><stop style={{
    at File.buildCodeFrameError (/Users/myusr/projects/testpj/node_modules/@babel/core/lib/transformation/file/file.js:209:12)

我尝试过将标签转为驼峰式，但SVG无法正常渲染，且我不想修改SVG代码。也看到调整Babel配置的方案，但官方不建议这么做。请问如何在不大幅调整项目配置、不修改SVG代码的前提下解决该SVG渲染问题？

解决方案 #

方法1：强制以资源形式导入SVG（无需修改配置） #

React 18默认用@svgr/webpack将SVG转为JSX组件，这会触发命名空间错误。可以通过导入前缀强制使用file-loader加载SVG为文件路径，避免解析为组件：

// 导入时指定用file-loader处理，跳过其他loader
import logo from '!!file-loader!./logo.svg';
// 正常使用img标签渲染
<img src={logo} alt="logo" />

!!前缀会忽略项目中已有的SVG loader规则，直接用file-loader输出资源URL，完全避开JSX解析命名空间的问题。

方法2：给svgr添加命名空间忽略配置（小幅度调整） #

如果希望保留组件式渲染SVG的能力，可以针对SVG的loader规则添加参数，无需修改全局Babel配置。以Create React App项目为例，用craco修改配置：

1. 安装craco：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js：

module.exports = {
  webpack: {
    module: {
      rules: [
        {
          test: /\.svg$/i,
          use: [
            {
              loader: '@svgr/webpack',
              options: {
                throwIfNamespace: false // 关闭命名空间错误抛出
              }
            },
            'file-loader'
          ]
        }
      ]
    }
  }
};

3. 修改package.json中的启动命令为craco start/craco build，配置即可生效。

方法3：用svg-url-loader嵌入SVG为Data URL #

通过svg-url-loader将SVG转为base64格式直接嵌入页面，同样无需修改SVG代码：

1. 安装依赖：

npm install svg-url-loader --save-dev

2. 修改导入方式：

import logo from '!!svg-url-loader!./logo.svg';
<img src={logo} alt="logo" />

这种方式会把SVG内容嵌入到页面中，避免了JSX解析环节的命名空间问题。

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