create-block's css fails to build due to a ModuleBuildError with postcss

[skorasaurus]

Description

I was working on a custom-block that I had made using create-block, ran npm packages updates on it; then ran npm run start on my block, and began receiving the same error that I posted below.

I was able to reproduce by creating a new block using create-block from scratch, so my hunch is that there's a regression introduced by the newest version of wordpress/scripts today

perhaps it's an error with the newly updated postcss-plugins-preset (https://github.com/WordPress/gutenberg/blob/ddb946674120ec27de94391b313f6bdfec64da6a/packages/postcss-plugins-preset/CHANGELOG.md#300-2021-04-29) ?

Step-by-step reproduction instructions

1. run npx @wordpress/create-block test-block-2

Expected behaviour

The block builds successfully and I would able to run npm run start in the new block's directory; and load the block in the editor.

Actual behaviour

This is the output of npx @wordpress/create-block test-block-2`

I've included part of the error message below.

ERROR in ./src/style.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: [object Object] is not a PostCSS plugin at Processor.normalize

When I run npm run start inside the directory of my newly created block, I receive the same error message, here it is in full

I received the same exact error message when I run npm run start after I had run npm packages updates in my custom block as well.

WordPress information

• WordPress version:
• Gutenberg version:
• Are all plugins except Gutenberg deactivated? no
• Are you using a default theme (e.g. Twenty Twenty-One)? N/a

Device information

Ubuntu 18.04; using nvm, but my node is v12.20.0; npm 6.14.11

[gziolo]

I investigated it a bit and it looks like npm i postcss@8.2.2 resolves the issue. postcss was set as a dependency before in the preset, but now it is a peer dependency everywhere, and suddently it resolves to v6 :upside_down_face:

I'm about to open a patch.

[gziolo]

https://github.com/WordPress/gutenberg/pull/31364 didn't help. There is something else that forces postcss to install with an older version.

[gziolo]

It's a very strange issue related to how npm works. postcss v6 is set as a dependency of rtlcss that is used by @wp-g2/create-styles that is a dependency of @wordpress/components.

I see that postcss v8.2.13 gets installed properly as a nested dependency of @wordpress/scripts now. However, there is apparently something going on with postcss-loader that uses postcss v6. It doesn't even help that it has peer dependencies defined on postcss as "^7.0.0 || ^8.0.1".

[gziolo]

In my testing, everything works properly when using npm 7. It looks like it's a very specific bug in npm 6 that was resolved in npm 7 when they change how peer dependencies work 🤷🏻

This issue should self-resolve when @wordpress/components no longer depend on rtlcss and postcss v6. It's already the case in Gutenberg in trunk. We need to wait 2 more weeks to propagate all that to npm.

[skorasaurus]

Thank you for your assistance @gziolo

For anyone else encountering this, I was able to resolve this and use create-block again by:

upgrading to node 15 (which includes npm 7) deleting the node_modules folder of the block that you made (or recently created) (not sure if this one is required) running npm i postcss@8.2.2

[intelligence]

Updating node to 15.14.0 (from 14) solved the issue for me.

[gziolo]

I can confirm it works again with the latest version of @wordpress/create-block:

In practice, it's all related to improvements applied to @wordpress/components that no longer depends on PostCSS 🎉