升级依赖后引入SVG报Cannot read property 'tagName' of null如何解决

云上老周

2026-9-28

报错诱因

该错误是@svgr/webpack（SVG转React组件的工具）执行解析逻辑时触发的，核心原因如下：

你升级依赖后出现了版本冲突：react-scripts@4.0.3内置的@svgr/webpack版本和其他第三方依赖携带的高版本@svgr/webpack不兼容，解析逻辑发生了变化
你提供的SVG中包含<path d="M0 0h24v24H0z" fill="none"/>这类仅做占位的空路径节点，新版@svgr/webpack的解析器处理这类无实际渲染作用的节点时，会误判节点为null，读取tagName属性时就抛出了该报错。

可按优先级选择以下任意方案解决：

方案1：修改SVG文件（最快生效）
直接删除SVG代码中无实际作用的占位路径<path d="M0 0h24v24H0z" fill="none"/>，该节点不影响SVG的最终显示效果，删除后重新编译即可恢复正常。
方案2：强制锁定依赖版本
强制项目所有@svgr/webpack使用和react-scripts@4.0.3适配的5.5.0版本，解决版本冲突问题：
如果使用yarn作为包管理器，直接在package.json中新增resolutions字段：
```
"resolutions": {
  "@svgr/webpack": "5.5.0"
}
```
之后重新执行yarn install即可。
如果使用npm作为包管理器，先在package.json的scripts中新增"preinstall": "npx npm-force-resolutions"，再添加上述resolutions字段，之后重新执行npm install。

方案3：调整SVG引入方式
放弃ReactComponent的组件式引入，改用静态资源引入方式，绕开@svgr/webpack的处理逻辑：

import mopedUrl from '../../assets/img/moped.svg';
// 使用时直接作为img标签的src属性
function Demo() {
  return <img src={mopedUrl} alt="moped" />
}

方案4：自定义svgr配置（适用自定义webpack配置的项目）
如果你已经eject了CRA配置，或者使用了craco、customize-cra等工具扩展配置，给@svgr/webpack loader添加{ removeEmptyNodes: false }配置，关闭自动清理空节点的逻辑即可。