postcss plugins not found when compiling with CRA v5.0.0 and fomantic-ui

Describe the bug

CRA v5 appears to be incompatible with fomantic-ui, since installing this package causes compile errors about postcss plugins not existing

Did you try recovering your dependencies?

Yes

❯ npm --version 8.5.4

Which terms did you search for in User Guide?

I searched for postcss

Environment

Environment Info:

current version of create-react-app: 5.0.0 running from /home/davidg/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

System: OS: Linux 5.10 Ubuntu 18.04.6 LTS (Bionic Beaver) CPU: (8) x64 Intel® Core™ i7-6700 CPU @ 3.40GHz Binaries: Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node Yarn: Not Found npm: 8.5.4 - ~/.nvm/versions/node/v16.8.0/bin/npm Browsers: Chrome: 99.0.4844.51 Firefox: Not Found npmPackages: react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 react-scripts: 5.0.0 => 5.0.0 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

1. npx create-react-app@latest cra-test --use-npm

Follow documented fomantic-ui install instructions: 2. npm install --ignore-scripts fomantic-ui 3. cd node_modules/fomantic-ui 4. npx gulp install (select defaults) 5. npx gulp build 7. npm start (this works normally) 8. rm node_modules package-lock.json -Rf 9. npm install 10. npm start

Expected behavior

Successful compilation

Actual behavior

ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css) Module Error (from ./node_modules/postcss-loader/dist/cjs.js): Loading PostCSS “postcss-flexbugs-fixes” plugin failed: Cannot find module ‘postcss-flexbugs-fixes’ Require stack:

/home/davidg/cra-test/node_modules/postcss-loader/dist/utils.js /home/davidg/cra-test/node_modules/postcss-loader/dist/index.js /home/davidg/cra-test/node_modules/postcss-loader/dist/cjs.js /home/davidg/cra-test/node_modules/loader-runner/lib/loadLoader.js /home/davidg/cra-test/node_modules/loader-runner/lib/LoaderRunner.js /home/davidg/cra-test/node_modules/webpack/lib/NormalModule.js /home/davidg/cra-test/node_modules/webpack-manifest-plugin/dist/index.js /home/davidg/cra-test/node_modules/react-scripts/config/webpack.config.js /home/davidg/cra-test/node_modules/react-scripts/scripts/start.js

Reproducible demo

I hope the steps above are concise enough to serve as a reproducible demo also

[samuliasmala]

I have the same issue except I’m not using fomantic-ui but Material-UI. The npm install postcss-flexbugs-fixes postcss-normalize postcss-preset-env workaround also fixes the issue for me.

I believe something in my codebase is triggering the postcss which is failing since the packages are installed under node_modules/react-scripts/node_modules/

Before running npm install postcss-flexbugs-fixes

$ find node_modules/ -name 'postcss-flexbugs-fixes'
node_modules/react-scripts/node_modules/postcss-flexbugs-fixes

After running npm install postcss-flexbugs-fixes

$ find node_modules/ -name 'postcss-flexbugs-fixes'
node_modules/postcss-flexbugs-fixes

I’m pretty sure the above change in postcss-flexbugs-fixes package location is the reason why it starts working. Do you know if there’s a way to fix it other than installing those three packages? Also any idea what is triggering the postcss processing in cra application? I tried but couldn’t find the culprit from my fairly large codebase.

[toresenneseth]

Rebuilding the lockfile worked for me as well.