CODEWITHSUNDEEP
javascriptreactjsgraphqlgatsbygatsby-plugin
FRMR
FRMR

Reputation: 358

gatsby-plugin-react-svg causing too much recursion error

I've installed gatsby-plugin-react-svg, but when I update gatsby-config file, it causes a 'too much recursion' error. I've tried the configuration recommended on the gatsby documentation pages but it still gives me the error.

error:

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.
            },
        },

Upvotes: 2

Views: 235

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29335

You need to configure the plugin by specifying the SVG folder. In your gatsby-config.js add the following configuration:

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.
        },
    },

Keep in mind that the include rule is a regular expression that matches exactly the folder name. If you have a structure like images/svg, the pathname in the rule must be set to /svg/ either way.

The asset folder must only contain SVG assets, if not, it may cause recursion issues.

Upvotes: 1

Related Questions