React项目中import与require导入SVG的差异及导入报错问题

核心差异原因 #

• 模块校验逻辑不同
  require是CommonJS规范的动态导入语法，仅在代码运行时执行加载逻辑，无论是TypeScript还是ESLint这类代码检查工具，都不会对动态导入做严格的静态类型校验，只要构建工具本身支持SVG资源加载就可以正常运行。
  而ES6的import是静态导入语法，代码检查工具会在编译/编码阶段就对所有导入的模块做类型和存在性校验，SVG属于非JavaScript/TypeScript的资源文件，默认不在可识别的模块范围内，没有对应的类型声明就会直接抛出找不到模块的错误。
• 构建工具的兼容逻辑不同
  几乎所有React项目的默认构建配置（Webpack/Vite等）都内置了CommonJS导入静态资源的兼容处理，用require导入SVG时会直接命中静态资源加载规则，返回对应的资源路径或者转换后的SVG组件。而ES6 import的静态资源识别依赖显式的类型声明配置，未配置的情况下就会报错。

解决方案 #

如果要使用ES6 import语法导入SVG，按项目类型补充对应配置即可：

• TypeScript项目：在项目根目录或src目录下的类型声明文件（通常为react-app-env.d.ts或自定义的declarations.d.ts）中添加SVG模块声明：

// 仅导入SVG资源路径的场景
declare module '*.svg' {
  const content: string;
  export default content;
}

// 如果使用@svgr/webpack等工具将SVG转换为React组件，使用下面的声明
// import * as React from 'react';
// declare module '*.svg' {
//   const content: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
//   export default content;
// }

• JavaScript项目：在ESLint配置文件中补充对SVG后缀的导入识别，修改import/extensions规则，或在settings.import/resolver配置项中添加SVG资源的识别规则即可。

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