package causes postcss compile error (using create-react-app 5.0.0)

[davegravy]

Bug Report

Upgrading to CRA v5 I'm unable to compile. Uninstalling packages systematically I narrowed the culprit down to fomantic-ui. I produced a minimal example below.

Steps to reproduce

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

Follow documented 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 result

For compile to succeed

Actual result

The compile error I receive:

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

Testcase

Screenshot (if possible)

Versions

fomantic-ui@2.8.8 (also confirmed with fomantic-ui@2.9.0-beta.259)
create-react-app@5.0.0
node@16.8.0
npm@8.5.4

[davegravy]

In order to eliminate the error it's insufficient to merely npm uninstall fomantic-ui. It's necessary to follow that with rm node_modules package-lock.json -Rf && npm install.

BTW I'm not positive this is an FUI bug (versus CRA5) but would appreciate help identifying that either way.

[lubber-de]

FUI itself does not use postcss loader nor postcss-flexbug, so i would not declare this as a FUI bug per se as it comes from CRA5.

I believe postcss loader finds something in the FUI code which triggers it to expect flexbug plugin (which is not loaded/available as seen in your screenshot) .

If you can find out if/which css code of FUI is triggering this, we might investigate, but at the moment i don't see any point where to dig into the FUI code to fix something.

[lubber-de]

You could try to manually install postcss-flexbug via

npm install postcss-flexbugs-fixes

inside your project or globally via

npm install -g postcss-flexbugs-fixes

if that solves your issue (because plugin should now be found) or at least gives more details which part of FUI might cause it.

[davegravy]

npm install postcss-flexbugs-fixes

Thanks.

Installing this package, there are two others which it then complains can't be found:

• postcss-normalize
• postcss-preset-env

If I install those in addition then the error disappears. I'm also not sure how to identify what aspect of fomantic-ui is triggering this. I can create an issue on the CRA github and maybe they will have insight.

Thanks for FUI, I really like it!

[lubber-de]

Closing for now as CRA 5 obviously has to adjust their dependency chain.
Happy to reopen in case we really have to fix something in FUI