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

Posted 2023-03-08

【中文标题】gatsby-plugin-react-svg 导致太多递归错误

【英文标题】：gatsby-plugin-react-svg causing too much recursion error

【发布时间】：2021-03-03 08:56:44

【问题描述】：

我已经安装了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(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/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.
            ,
        ,

【参考方案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/。

asset文件夹只能包含SVG assets，否则可能会导致递归问题。

【讨论】：

非常感谢。我的正则表达式是错误的，而且我还在同一个文件夹中保留了一些 PNG，所以我可能有很多问题。