Failed build - Css Minimizer

[t2ca]

Recently I started having these errors during build.

Local

Css Minimizer Plugin: postcss-svgo:
/Users/admin/Desktop/Projects/*/*/styles.0316d89035a****b0edf.css:154:5: Error:
Plugin name should be specified

Netlify

12:04:13 PM: failed Building production JavaScript and CSS bundles - 269.826s
12:04:13 PM: error Generating JavaScript bundles failed
12:04:13 PM: styles.0316d89035a****b0edf.css from Css Minimizer
12:04:13 PM: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './plugins/names' is not defined by "exports" in /opt/build/repo/node_modules/colord/package.json
12:04:13 PM:     at applyExports (internal/modules/cjs/loader.js:491:9)
12:04:13 PM:     at resolveExports (internal/modules/cjs/loader.js:507:23)
12:04:13 PM:     at Function.Module._findPath (internal/modules/cjs/loader.js:635:31)
12:04:13 PM:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:953:27)
12:04:13 PM:     at Function.Module._load (internal/modules/cjs/loader.js:842:27)
12:04:13 PM:     at Module.require (internal/modules/cjs/loader.js:1026:19)
12:04:13 PM:     at require (internal/modules/cjs/helpers.js:72:18)
12:04:13 PM:     at Object.<anonymous> (/opt/build/repo/node_modules/postcss-colormin/dist/colours.js:10:37)
12:04:13 PM:     at Module._compile (internal/modules/cjs/loader.js:1138:30)
12:04:13 PM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)

Edit: I was able to solve this issue in Netlify by changing the Node version in the settings to Node 16.
You can do this by adding the following environment variable in Netlify. NODE_VERSION 16

[vladar]

Hi @t2ca

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[Bartmr]

@vladar Just use the most recent Gatsby version with gatsby-plugin-sass and node-sass 6. I'm having the same issue here

[LekoArts]

This was an upstream issue in omgovich/colord#51 - updating your dependencies so that you get colord@^1.7.2 installed should fix your issue.

[Bartmr]

@LekoArts shouldn't this also be done in Gatsby dependencies? It's a bit weird installing packages on our own projects just to lock the version.

[LekoArts]

We don't pin version but use ^ for versions, so if you update/reinstall your dependencies you'll get the new dependencies. You can run a npm init gatsby, choose PostCSS and do a yarn why colord and you'll get:

➜ yarn why colord
yarn why v1.22.5
[1/4] Why do we have the module "colord"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "colord@2.0.0"
info Reasons this module exists
   - "gatsby#css-minimizer-webpack-plugin#cssnano#cssnano-preset-default#postcss-colormin" depends on it
   - Hoisted from "gatsby#css-minimizer-webpack-plugin#cssnano#cssnano-preset-default#postcss-colormin#colord"
info Disk size without dependencies: "176KB"
info Disk size with unique dependencies: "176KB"
info Disk size with transitive dependencies: "176KB"
info Number of shared dependencies: 0
Done in 0.55s.

[amenks]

In my case I just found that I was using gatsby-plugin-react-svg and a css with

background-image: url("../something.svg")

I guess that this may cause a conflict.