Gatsby中未加引号SVG解析错误的排查与配置调整

Hey there, let’s work through this postcss-svgo SVG parsing error you’re facing during your Gatsby build. I’ve dealt with similar head-scratchers before, so here are practical ways to either track down the problematic SVG file or adjust your config to resolve the issue.

First: Track Down the Troublesome SVG File #

If you want to fix the root cause (the best long-term solution), you need to find which SVG has unquoted attributes. Here are two reliable methods:

Method 1: Temporarily Modify postcss-svgo to Log File Paths #

By default, postcss-svgo doesn’t always tell you which file is causing the error, but we can tweak its code to reveal that:

1. Open node_modules/postcss-svgo/index.js in your project.
2. Look for the error-handling section (usually in the process function where it throws the parsing error).
3. Right before the error is thrown, add a line to log the file being processed:

   console.error("🚨 Error processing SVG file:", this.source.input.file);
   

4. Re-run gatsby build—your console will now spit out the exact path to the problematic SVG.
5. Once you’ve found the file, don’t forget to revert this change (or delete node_modules and run npm install again to reset the dependency).

Method 2: Scan All SVGs with a Custom Script #

If modifying node modules feels too messy, write a quick Node.js script to scan every SVG in your project and flag the broken one:

1. Create a file named find-bad-svg.js in your project root with this code:

   const fs = require('fs');
   const path = require('path');
   const { optimize } = require('svgo');
   
   const scanDirectory = (dir) => {
     fs.readdirSync(dir).forEach(item => {
       const fullPath = path.join(dir, item);
       const stats = fs.statSync(fullPath);
       
       if (stats.isDirectory()) {
         scanDirectory(fullPath);
       } else if (path.extname(item) === '.svg') {
         try {
           const svgContent = fs.readFileSync(fullPath, 'utf8');
           optimize(svgContent, { path: fullPath });
           console.log(`✅ ${fullPath} is valid`);
         } catch (err) {
           console.error(`❌ BROKEN SVG: ${fullPath} — ${err.message}`);
         }
       }
     });
   };
   
   scanDirectory('./src'); // Replace with './static' if your SVGs are stored there
   

2. Run it with node find-bad-svg.js—it’ll loop through all SVGs and tell you exactly which one is throwing the parsing error.

Second: Adjust Config to Bypass the Error (If You Can’t Fix the SVG Right Now) #

If you need to get the build working immediately without hunting down the file, you can tweak your PostCSS/SVGO config:

Option 1: Loosen SVGO’s Parsing Rules #

Create or update a postcss.config.js in your project root to customize svgo’s behavior, allowing unquoted attributes:

module.exports = {
  plugins: [
    require('postcss-svgo')({
      plugins: [
        {
          name: 'preset-default',
          params: {
            overrides: {
              // Disable the rule enforcing quoted attributes (if applicable)
              cleanupAttrs: false,
            },
          },
        },
        // Alternatively, set the parser to allow unquoted attributes directly
        {
          name: 'parser',
          params: {
            xml: {
              allowUnquotedAttributes: true,
            },
          },
        },
      ],
    }),
  ],
};

Option 2: Disable postcss-svgo Entirely (Last Resort) #

If all else fails, you can temporarily disable the postcss-svgo plugin in your Gatsby config:
Update your gatsby-config.js like this:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [
          // Comment out or remove the postcss-svgo line here
          // require('postcss-svgo')(),
        ],
      },
    },
  ],
};

Note: This skips SVG optimization entirely, so only use this if you’re in a pinch.

Once you find the problematic SVG, the best fix is to go in and add quotes to any unquoted attributes (like width=100 → width="100"). This will prevent issues with other tools down the line too.

内容的提问来源于stack exchange，提问作者Felipe Césár