gatsby-plugin-reak-svg导致太多递归错误

Question

我已经安装了gatsby-plugin-react-svg，但当我更新gatsby-config文件时，会导致"递归过多"错误。我已经尝试了gatsby文档页面上推荐的配置，但它仍然会给我错误。

错误：

InternalError: too much recursion
./node_modules/style-loader/lib/urls.js/module.exports
node_modules/style-loader/lib/urls.js:57
54 | 
55 |  /gi  = Get all matches, not the first.  Be case insensitive.
56 |  */
> 57 | var fixedCss = css.replace(/urls*(((?:[^)(]|((?:[^)(]+|([^)(]*))*))*))/gi, function(fullMatch, origUrl) {
| ^  58 |  // strip quotes (if they exist)
59 |  var unquotedOrigUrl = origUrl
60 |      .trim()

gatsby-config.js

plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/assets/images`,
},
},
`gatsby-plugin-react-svg`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sass`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/assets/images/favicon.png`, // This path is relative to the root of the site.
},
},

Answer 1

您需要通过指定SVG文件夹来配置插件。在gatsby-config.js中添加以下配置：

plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/assets/images`,
},
},
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /svg/ 
}
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sass`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/assets/images/favicon.png`, // This path is relative to the root of the site.
},
},

请记住，include规则是一个与文件夹名称完全匹配的正则表达式。如果具有类似images/svg的结构，则必须将规则中的路径名设置为/svg/。

资产文件夹必须只包含SVG资产，否则可能会导致递归问题。