如何解决React引用SVG时出现export 'ReactComponent' was not found报错

你使用的import { ReactComponent as XXX } from '*.svg'语法依赖@svgr/webpack loader对svg文件做编译转换，将其转为可直接调用的React组件。你的当前webpack配置未添加该loader，所以svg文件仅能导出默认的资源路径，对应报错提示的possible exports: default。

方案一：配置@svgr/webpack支持组件式导入（推荐） #

• 第一步：安装依赖
  执行命令：
  npm install @svgr/webpack --save-dev
  如果使用yarn，执行：
  yarn add @svgr/webpack --dev
• 第二步：修改webpack配置
  找到项目根目录下的webpack.config.js文件，在module.rules数组中新增svg处理规则：

module.exports = {
  // 此处保留你原有webpack配置的其他内容
  module: {
    rules: [
      // 此处保留你原有其他loader规则（处理jsx、css等的规则）
      // 新增以下svg处理规则
      {
        test: /\.svg$/i,
        // 仅对js/tsx文件导入的svg做组件转换
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      },
    ]
  }
}

如果你需要同时支持两种导入方式：默认导入为资源路径、命名导入为React组件，可将规则调整为：

{
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: { exportType: 'named' }
    },
    {
      loader: 'url-loader',
      options: { esModule: false }
    }
  ]
}

注意：如果原有配置中已经存在处理svg的规则（比如用file-loader/url-loader处理），需要将原有规则删除，或者调整匹配逻辑避免冲突。

• 第三步：重新执行构建
  修改配置后重新运行npm run webpack即可，原有代码的导入语法无需调整。

方案二：无需改配置的临时替代方案 #

如果你暂时不想调整webpack配置，可以将svg作为普通静态资源导入，用img标签渲染：

// 修改导入语法，去掉解构的ReactComponent
import LightBulb from "../../../assets/icons/lightbulb-on.svg";
import Cross from "../../../assets/icons/times-circle.svg";

// 渲染时替换为img标签
const InformationBox = ({ children, setState }) => {
      return (
        <div className={styles.informationBox}>
          <button
            className={styles.closeMessageBox}
            onClick={() => setState((state) => ({ ...state, infoBox: "" }))}
          >
            <img src={Cross} className={styles.closeMessageBoxIcon} alt="关闭" />
          </button>
          <img src={LightBulb} className={styles.informationBoxLogo} alt="提示" />
          <div className={styles.informationBoxContent}>{children}</div>
        </div>
      );
    };

该方案的缺点是无法通过className直接修改svg的fill、stroke等内部样式，仅适合不需要动态调整svg样式的场景。

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