使用ReactComponent导入SVG报错“Element type is invalid”求助

错误原因 #

你用{ ReactComponent as MyIcon }这种命名导入的方式不对——@svgr/webpack默认是把React组件作为默认导出，不是命名导出的ReactComponent。你解构这个不存在的命名导出，自然拿到的是undefined，渲染时就会抛出那个错误。

两种修复方案 #

方案1：修改导入语句（最简单） #

直接导入默认导出，重命名为你要的组件名：

import MyIcon from "../../assets/icons/12x12/arrow-down-12.svg"

之后正常使用<MyIcon />即可。

方案2：调整Webpack配置，支持命名导出 #

如果你习惯用ReactComponent的命名导入写法，可以修改@svgr的配置，让它输出命名导出：

module.exports = {
    module: {
      rules: [
        {
          test: /\.svg$/i,
          issuer: /\.[jt]sx?$/,
          use: [
            {
              loader: '@svgr/webpack',
              options: {
                exportType: 'named', // 开启命名导出
              },
            },
          ],
        },
      ],
    },
  }

配置改完后重启Webpack服务，之后就能用你原来的导入语句正常工作了。

额外检查点 #

• 确认SVG文件路径拼写正确，文件确实存在于指定位置
• 如果用了Create React App之类的脚手架，注意不要和内置的SVG处理规则冲突（不过你自定义了Webpack配置，应该没问题）

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