svgo.config.json doesn't work, but svgo.config.js does

[everdimension]

When using @parcel/transformer-svg-react, I noticed that it was stripping the viewBox attribute.
I tried enabling it, but this didn't work:

// svgo.config.json
{
  "plugins": [
    {
      "name": "preset-default",
      "params": {
        "overrides": {
          "removeViewBox": false
        }
      }
    }
  ]
}

After trying different things and removing .parcel-cache, changing config to a .js file worked:

// svgo.config.js
module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
        },
      },
    },
  ],
};

Parcel packages used:

    "@parcel/config-webextension": "^2.6.0",
    "@parcel/transformer-inline-string": "^2.6.0",
    "@parcel/transformer-svg-react": "^2.6.0",
    "parcel": "^2.6.0",

[mischnic]

#7741 is related. Currently we also don't invalidate the cache if the svgo config used by that transformer changes.

[CxRes]

I came across this bug as well and I am not sure this is a cache invalidation issue (though the cache is a real PITA). The configuration in svgo.config.json (I am also looking at 'removeViewBox') is correctly passed to svgo.optimize() function. Strange!

An hour later: I realized also that since I am inlining some of my SVGs for those I have to configure .htmlnanorc as well. Still does not address the bug!

[charIeszhao]

Same here. And I'm sure it's not a cache invalidation issue. It seems the svgo.config.json is not recognized at all. We came across this issue months ago, then I had to switch to js config in order to make it work.

But now since we are switching to ESM and then the js config is not working, either... Even we have tried renaming it to .cjs or changing it to ESM format with export default { ... }, the js config does not work whatsoever.

So there's no way to get around this now. Any help would be greatly appreciated...

Update:
Well, for those who still truggles to find a workaround, try .svgorc.json... I'm wondering why this is not even mentioned in any of the documentations

[iDm1]

Parcel 2.9.2 ignores all SVGO configuration files.

svgo.config.json,
svgo.config.js,
.svgorc.json,
.svgo.yml

All are completely ignored and there is no way to configure SVGO with Parcel.

[mischnic]

Here is the current list:

parcel/packages/optimizers/svgo/src/SVGOOptimizer.js

Lines 11 to 16 in 76aa20f

	let configFile = await config.getConfig([
	'svgo.config.js',
	'svgo.config.cjs',
	'svgo.config.mjs',
	'svgo.config.json',
	]);

However, that only applies for standalone SVG files. For HTML, you need to configure htmlnano instead

[iDm1]

However, that only applies for standalone SVG files. For HTML, you need to configure htmlnano instead

But SVG page in documentation clearly lists inline SVG https://parceljs.org/languages/svg/#inline-svg and svgo.config.json for minification https://parceljs.org/languages/svg/#minification

Just tried .htmlnanorc.json after removing .parcel-cache, it was also ignored.

// .htmlnanorc.json
{
    "minifySvg": {
        "plugins": [
            {
                "name": "preset-default",
                "params": {
                    "overrides": {
                        "removeViewBox": false,
                        "cleanupIDs": false,
                        "collapseGroups": false
                    }
                }
            }
        ]
    }
}

IDs are still removed from SVGs. Just for confirmation changed removeViewBox to true, but they are still there.

But disabling minifySvg completely works fine.

// .htmlnanorc.json
{
    "minifySvg": false
}