无法在 Gatsby TypeScript 项目中导入 SVG - 元素类型无效：需要一个字符串

Question

我正在尝试在我的 Gatsby TypeScript 项目中使用 svg 文件。我正在使用 gatsby-plugin-react-svg，我在应用程序上看到的错误是

One unhandled runtime error found in your files. See the list below to fix it:


Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `IndexPage`.

我利用了

中提到的信息

我在下面链接的存储库中重现了错误

https://github.com/hhimanshu/gatsby-svg-import-example

有人可以告诉我我做错了什么吗？

谢谢

Answer 1

尝试将包含规则定义为字符串：

{
  resolve: 'gatsby-plugin-react-svg',
  options: {
    rule: {
      include: `/svg/`
    }
  }
}

注意反引号：`/svg/` 而不是 /svg/

无法在 Gatsby TypeScript 项目中导入 SVG - 元素类型无效：需要一个字符串

Can't import SVG in Gatsby TypeScript Project - Element type is invalid: expected a string

svg

typescript

reactjs

gatsby

gatsby-plugin