React项目引入SVG报Cannot read properties of null(tagName)错误求助

可能的原因及对应解决方案 #

1. 检查SVG文件有效性 #

该错误大概率是svg-parser无法解析你的SVG文件导致的，先确认文件本身没问题：

• 直接用浏览器打开customer-delight-logo.svg，看能否正常显示
• 打开文件内容，确保根标签是<svg>且结构完整，没有未闭合的标签、语法错误或空内容

2. 处理webpack与react-scripts的冲突 #

你的项目同时使用了react-scripts（自带SVG处理逻辑）和自定义webpack配置，两者可能产生冲突：

• 如果不需要自定义webpack，删除dev脚本及webpack、webpack-cli、webpack-dev-server等相关依赖，直接用npm start启动项目
• 如果必须自定义webpack，需在webpack配置文件中正确配置SVG loader：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.svg$/i,
          issuer: /\.[jt]sx?$/,
          use: ['@svgr/webpack', 'file-loader'],
        },
      ],
    },
  };
  

  注意：使用react-scripts时，建议通过craco或eject修改内置配置，而非直接添加独立的webpack.config.js

3. 修改SVG引入方式 #

如果仅需将SVG作为图片引入而非React组件，可跳过@svgr/webpack的解析：

• 在import时添加?url后缀：

  import Logo from '../../Utility/assets/customer-delight-logo.svg?url';
  

• 或者在webpack配置中单独用file-loader处理SVG：

  {
    test: /\.svg$/,
    use: ['file-loader'],
  }
  

4. 重置依赖 #

可能是依赖版本不兼容导致的问题，尝试重置依赖：

rm -rf node_modules package-lock.json
npm install

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