将 SVGR 与 Webpack 一起使用并配置为输出 TypeScript 时出现语法错误

Question

我第一次尝试在React项目中使用SVGR，以便能够将 .svg 文件作为组件导入。

在Webpack 中使用 SVGR

在我的 webpack 配置中配置了 SVGR 如下...

{
  test: /\.svg$/,
  use: [
    {
      loader: "@svgr/webpack",
      options: {
        typescript: true,
      },
    },
  ],
},

为了用一个例子来测试它，我尝试了一个简单的 svg src/icons/clipboard.svg，看起来像这样......

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>clipboard</title>
<path d="M29 4h-9c0-2.209-1.791-4-4-4s-4 1.791-4 4h-9c-0.552 0-1 0.448-1 1v26c0 0.552 0.448 1 1 1h26c0.552 0 1-0.448 1-1v-26c0-0.552-0.448-1-1-1zM16 2c1.105 0 2 0.895 2 2s-0.895 2-2 2c-1.105 0-2-0.895-2-2s0.895-2 2-2zM28 30h-24v-24h4v3c0 0.552 0.448 1 1 1h14c0.552 0 1-0.448 1-1v-3h4v24z"></path>
<path d="M14 26.828l-6.414-7.414 1.828-1.828 4.586 3.586 8.586-7.586 1.829 1.828z"></path>
</svg>

使用这个 svg 文件和上面的配置，SVGR 最终生成以下...

import * as React from "react";

function SvgClipboard(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg width={32} height={32} {...props}>
      <path d="M29 4h-9a4 4 0 00-8 0H3a1 1 0 00-1 1v26a1 1 0 001 1h26a1 1 0 001-1V5a1 1 0 00-1-1zM16 2a2 2 0 11.001 3.999A2 2 0 0116 2zm12 28H4V6h4v3a1 1 0 001 1h14a1 1 0 001-1V6h4v24z" />
      <path d="M14 26.828l-6.414-7.414 1.828-1.828L14 21.172l8.586-7.586 1.829 1.828z" />
    </svg>
  );
}

export default SvgClipboard;

但是，这会导致 Webpack 错误...

ERROR in ./src/icons/clipboard.svg
SyntaxError: unknown: Unexpected token, expected "," (3:27)
  1 | import * as React from "react";
  2 | 
> 3 | function SvgClipboard(props: React.SVGProps<SVGSVGElement>) {
    |                            ^

问题似乎props在于生成的输出中包含的 。

因此，如果我使用 SVGR 配置设置禁用道具，则展开道具，即...

test: /\.svg$/,
use: [
  {
    loader: "@svgr/webpack",
    options: {
      typescript: true,
      expandProps: false,
    },
  },
],

然后 Webpack 运行正常，但现在我无法访问我想传递给 svg react 组件的任何道具。

我似乎无法弄清楚为什么会出现语法错误。

---

尝试其他方法来尝试缩小范围...

如果我禁用生成打字稿的 SVGR 配置设置，那么问题就会消失。例如，

test: /\.svg$/,
use: [
  {
    loader: "@svgr/webpack",
    options: {
      typescript: false,
    },
  },
],

所以这对我来说进一步缩小了范围。然后我的想法指向我如何在 Webpack 中加载打字稿。

在DOCO为SVGR它规定的是

默认情况下，@svgr/webpack 包含一个优化配置的 babel-loader 。

那么，也许问题与 babel 的配置方式有关？

当我查看该配置时，我没有看到任何与 TypeScript 相关的内容......所以，我想知道 @svgr/webpack 加载器，以及我如何配置它，是否正在生成 TypeScript 但内置的babel loader 没有正确解析 - 即它可能假设它正在接收 JavaScript？也许这就是语法错误的来源？

Answer 1

如果您传入禁用 @svgr/webpack 自己的 babel-loader 的选项并提供您自己的，它应该可以工作。

即这样做

{
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  issuer: {
    test: /\.tsx?$/,
  },
  use: [
    'babel-loader',
    {
      loader: '@svgr/webpack',
      options: {
        babel: false,
      },
    },
    'url-loader',
  ],
}

确保你的 babel 配置也设置正确。