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

Question

我正在尝试使用 SVGR第一次在 React 项目中能够将 .svg 文件作为组件导入。
使用 SVGR with Webpack
在我的 webpack 配置中配置了 SVGR 如下...

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

为了用一个例子来测试它，我在 src/icons/clipboard.svg 尝试了一个简单的 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 配置设置禁用 Prop ， Expand Props ，也就是说……

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

然后 Webpack 运行正常，但现在我无法访问我想传递给 svg react 组件的任何 Prop 。
我似乎无法弄清楚为什么会出现语法错误。

尝试其他方法来尝试缩小范围...
如果我禁用生成 typescript 的 SVGR 配置设置，那么问题就会消失。例如，

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

所以这对我来说进一步缩小了范围。然后我的想法指向我如何在 Webpack 中加载 typescript 。
在 SVGR 的文档中 it states那

By default, @svgr/webpack includes a babel-loader with an optimized configuration.

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

Answer 1

我设法使用以下设置摆脱了这个错误:
首先，您需要制作svgr发出 TypeScript，然后 禁用 它的内部 Babel 处理步骤，因为它没有配置为处理 TypeScript。我们将为此插入我们自己的加载器。哦，出于某种我不太明白的原因(另见下文)，您还必须告诉 svgr输出带有 tsx 的文件延期:
所以在你的 Webpack 配置中的某个地方你会有

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

这假设您在自己的配置文件中配置 Babel。为它提供完整的配置超出了这个答案的范围，但为了记录:它当然需要配置为处理 TypeScript 和 JSX。
现在，这似乎还不够:我认为这里发生的事情是 Babel 以某种方式接收与原始导入路径相关联的生成源，该路径可能以 .svg 结尾。 ，或者甚至可能根本没有任何路径，现在我想起来了。现在 Babel，或者更确切地说是 TypeScript 插件/预设(抱歉，我对 Babel 内部的知识是 非常 有限)，认为没有必要将此文件作为 TypeScript 处理，因为当然 SVG 不是 TypeScript文件，如果根本不涉及路径，也没有提示为什么它应该是 TypeScript。
强制 Babel 将其作为 TypeScript 处理的一种方法是配置您的 @babel/preset-typescript如下:

["@babel/typescript", {
    allExtensions: true,
    isTSX: true,
}],

这使得 Babel 的 TypeScript 部分无视扩展并无条件地将所有内容作为 TSX 处理。现在，这当然可能会导致其他问题，但我还没有找到以更细粒度的方式配置它的方法。 (虽然不可否认，我还没有看起来很努力。任何指向正确方向的指针都是最受欢迎的。:)