postcss plugins not found when compiling with CRA v5.0.0 and fomantic-ui
Created by: davegravy
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(R) Core(TM) 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
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