使用@svgr/webpack导入SVG遇语法错误（TypeScript React项目求助）

我之前用yarn create react-app xx --typescript创建项目时，也碰到过一模一样的@svgr/webpack语法错误，总结了几个靠谱的解决办法，按顺序试应该能搞定：

1. 先升级react-scripts到最新稳定版 #

旧版本的react-scripts（比如v4.x及更早）和@svgr/webpack的兼容性不太好，很容易触发这种语法解析错误。执行下面的命令升级：

yarn upgrade react-scripts --latest

升级完成后一定要重启你的开发服务器，这个细节很重要！

2. 添加SVG的TypeScript类型声明 #

TypeScript默认不识别SVG模块，我们需要手动声明它的类型。在项目src目录下创建一个名为custom.d.ts的文件，写入以下内容：

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

这个声明文件同时支持两种导入方式：默认导入SVG路径，或者导入React组件形式的SVG。

3. 改用ReactComponent方式导入SVG #

Create React App默认配置的@svgr/webpack更推荐用组件形式导入SVG，试试把你的导入语句改成：

import { ReactComponent as XxSvg } from 'paths/xx.svg';

然后在组件里直接像使用普通React组件一样调用它：

<XxSvg width={24} height={24} />

这种方式避开了默认导入可能触发的语法解析问题，很多时候直接就能解决报错。

4. 进阶：用Craco自定义Webpack配置（如果前三种都不行） #

如果你不想eject项目，可以用@craco/craco来覆盖默认的Webpack配置：

• 首先安装依赖：

yarn add @craco/craco --dev

• 然后在项目根目录创建craco.config.js，添加SVG的处理规则：

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

• 最后把package.json里的脚本命令替换成craco的：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

重启开发服务器后应该就能正常导入SVG了。

内容的提问来源于stack exchange，提问作者鲜正权