Updating to `svgo@3` causes issues

[itsmatteomanf]

I updated astro-compress to its latest 1.1.1 release and this broke icons as it brought with it svgo@3. Not fully sure it's an issue with astro-icon, might very likely be upstream at Astro itself, but I cannot guarantee it...

This made a change on the cleanupIDs plugin, which is now called cleanupIds.

I have now pinned astro-compress to 1.0.12 especially as the 1.1 feature wasn't of interest in my case, but it might be worth updating this package to support svgo@3.

Reference for svgo@3: https://github.com/svg/svgo/releases/tag/v3.0.0.

file:///Users/matteo/GitHub/[repo]/dist/entry.mjs?time=1666904273871:1746
      throw new Error(`[astro-icon] Unable to load icon "${name}"!
            ^

Error: [astro-icon] Unable to load icon "wifi-slash-regular"!
Error: Unknown builtin plugin "cleanupIDs" specified.
    at file:///Users/matteo/GitHub/[repo]/dist/entry.mjs?time=1666904273871:1746:13
    at async renderToIterable (file:///Users/matteo/GitHub/[repo]/dist/entry.mjs?time=1666904273871:745:21)
    at async renderAstroComponentInline (file:///Users/matteo/GitHub/[repo]/dist/entry.mjs?time=1666904273871:973:24)
    at async renderChild (file:///Users/matteo/GitHub/[repo]/dist/entry.mjs?time=1666904273871:671:5)
    at async AstroComponent.[Symbol.asyncIterator] (file:///Users/matteo/GitHub/[repo]/dist/entry.mjs?time=1666904273871:703:7)
    at async renderAstroComponent (file:///Users/matteo/GitHub/[repo]/dist/entry.mjs?time=1666904273871:714:20)
    at async renderAstroComponentInline (file:///Users/matteo/GitHub/[repo]/dist/entry.mjs?time=1666904273871:974:9)
    at async renderChild (file:///Users/matteo/GitHub/[repo]/dist/entry.mjs?time=1666904273871:671:5)
    at async AstroComponent.[Symbol.asyncIterator] (file:///Users/matteo/GitHub/[repo]/dist/entry.mjs?time=1666904273871:703:7)
    at async renderAstroComponent (file:///Users/matteo/GitHub/[repo]/dist/entry.mjs?time=1666904273871:714:20)

[SamiFala]

Exactly same issue at the same time bro

[stramel]

That's unfortunate that v3 was released in a minor bump to the project. It's always tough to handle common tooling major bumps without any issues downstream.

For now, you will have to fix your astro-compress versions to a specific version 1.0.12 until we have time to update our code.

We do have a plan to move to svgo@3 in the near future.

[itsmatteomanf]

That's unfortunate that v3 was released in a minor bump to the project. It's always tough to handle common tooling major bumps without any issues downstream.

Yeah, which is what caused me to investigate. It wasn't immediately obvious as it being a minor bump only I didn't expect to have issues, especially as astro-compress runs after everything is done.

Happy to see a solution will be found, hopefully soon. Thanks!

[smithbm2316]

I personally found a resolution to this for my use case on my personal site by adding svgo as a dev dependency and pinning it to version 2.8.0 (pnpm add -D svgo@2.8.0). seems to work as intended for me in both my astro dev server and builds! This does assume that you don't mind running an older version of svgo, so I haven't found a proper fix for svgo version 3.0.0 and up

[mardybardy]

I have found an elegant fix for this for pnpm users.

Caveat: This will only work if you have shamefully-hoist=true in your .npmrc file. If anyone can find a way round this please let me know. I think it is currently not possible to hoist workspace packages using the public-hoist-pattern[]= but if anyone knows different let me know.

First create a pnpm-workspace.yaml file in your project root.

Paste this into it:

pnpm-workspace.yaml

# pnpm-workspace.yaml
packages:
  - "packages/*"

Next create a directory called 'packages' at project root. Inside that directory create another directory called svgo. Inside the svgo directory create two files, a package.json and an index.js file. Open the files and copy and paste the following into them:

packages/svgo/package.json

{
    "name": "svgo",
    "type": "module",
    "version": "0.0.1",
    "private": true,
    "scripts": {},
    "dependencies": {
        "svgo": "^2.8.0"
    }
}

packages/svgo/index.js

import svgo from "svgo";

export default svgo

Now run pnpm install. You should now have a node_modules directory inside the svgo directory as well as a node_modules at project root.

Finally return to your project root and create a file called .pnpmfile.cjs. Populate it with the following:

.pnpmfile.cjs

function readPackage(pkg, context) {
    if (pkg.name === 'astro-icon')) {
        pkg.dependencies.svgo = "workspace:*"

    }
    return pkg
}

module.exports = {
    hooks: {
        readPackage
    }
}

On running pnpm run build everything should now build properly, assigning v2 of svgo to astro-icon and v3 to astro-compress.

[artursopelnik]

Fix for npm users:

Add the following to your package.json:

"devDependencies": { "astro-icon": "^0.8.0", svgo": "^2.8.0" }