[V5] PostCSS 8 error while building

[BrodaNoel]

Describe the bug

While running env-cmd -f .env.staging react-scripts build
I'm getting the following error:

Creating an optimized production build...
(node:44878) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(Use `node --trace-deprecation ...` to show where the warning was created)
Failed to compile.

static/css/5068.bd16ed94.chunk.css from Css Minimizer plugin
Error: PostCSS plugin postcss-discard-comments requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-project-name@0.1.0 build:staging: `env-cmd -f .env.staging react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-project-name@0.1.0 build:staging script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/noel/.npm/_logs/2021-12-20T19_55_17_952Z-debug.log

The migration guide, clearly doesn't help. It's talking about CRA 3

Did you try recovering your dependencies?

I tried removing and adding everything 3 million times, as usual.

Which terms did you search for in User Guide?

• postcss
• v4
• css

Environment

I can't because some company policies.
I'm using MacOS

Steps to reproduce

Just run your build command (mine is env-cmd -f .env.staging react-scripts build). My command was working properly during 4 years. Broken after upgrading to V5

Expected behavior

It should builds

Actual behavior

Not building.

[BrodaNoel]

This should be the dependency with the problem:

my-project@0.1.0 /Users/noel/my-project
└─┬ react-scripts@5.0.0
  └─┬ css-minimizer-webpack-plugin@3.3.0
    └─┬ cssnano@5.0.13
      └─┬ cssnano-preset-default@5.1.9
        └── postcss-discard-comments@5.0.1

[ludofischer]

create-react-app 5 should be using PostCSS 8 already. Can you figure out why other versions of PostCSS are in your path (npm why postcss)?

[BrodaNoel]

npm why doesn't exists. you probably want to say npm ls.

This is the full result of npm ls postcss:

xxxxxxxxxx@0.1.0 /Users/noel/xxxxx/xxxxxxx
├─┬ @storybook/addon-essentials@6.4.9
│ └─┬ @storybook/addon-docs@6.4.9
│   └─┬ @storybook/builder-webpack4@6.4.9
│     ├─┬ autoprefixer@9.8.8
│     │ └── postcss@7.0.39  deduped
│     ├─┬ css-loader@3.6.0
│     │ ├─┬ icss-utils@4.1.1
│     │ │ └── postcss@7.0.39  deduped
│     │ ├── postcss@7.0.39  deduped
│     │ ├─┬ postcss-modules-extract-imports@2.0.0
│     │ │ └── postcss@7.0.39  deduped
│     │ ├─┬ postcss-modules-local-by-default@3.0.3
│     │ │ └── postcss@7.0.39  deduped
│     │ ├─┬ postcss-modules-scope@2.2.0
│     │ │ └── postcss@7.0.39  deduped
│     │ └─┬ postcss-modules-values@3.0.0
│     │   └── postcss@7.0.39  deduped
│     ├── postcss@7.0.39  deduped
│     └─┬ postcss-flexbugs-fixes@4.2.1
│       └── postcss@7.0.39  deduped
└─┬ react-scripts@5.0.0
  ├─┬ css-loader@6.5.1
  │ └── UNMET PEER DEPENDENCY postcss@8.4.5  deduped
  ├─┬ css-minimizer-webpack-plugin@3.3.0
  │ ├─┬ @types/cssnano@4.0.1
  │ │ └── postcss@7.0.39  deduped
  │ └── UNMET PEER DEPENDENCY postcss@8.4.5
  ├── UNMET PEER DEPENDENCY postcss@8.4.5
  ├─┬ resolve-url-loader@4.0.0
  │ └── postcss@7.0.39
  └─┬ tailwindcss@3.0.6
    └─┬ postcss-js@3.0.3
      └── postcss@8.4.5

[ludofischer]

npm why exists at least in npm 8, but npm ls works fine. I think something has gone wrong in you install. Did you want to upgrade to react-scripts 5.0.0? You've got react-scripts version 5.0.0 create-react-app 5 should use PostCSS 8 (see release notes highlights), but in the output you've posted it says UNMET PEER DEPENDENCY.

[BrodaNoel]

Fixed!
https://www.npmjs.com/package/@storybook/builder-webpack5
Seems like Storybook was using webpack4. So, after updating to webpack5 in storybooks, the error dissapeared.