[V5] PostCSS 8 error while building

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.

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

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)?

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

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.

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.

Navigation Menu

Repository navigation

[V5] PostCSS 8 error while building #11811

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[V5] PostCSS 8 error while building #11811

Description

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Activity

BrodaNoel commented on Dec 20, 2021

ludofischer commented on Dec 21, 2021

BrodaNoel commented on Dec 22, 2021

ludofischer commented on Dec 23, 2021

BrodaNoel commented on Jan 13, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions