Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

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

Issue Analytics

State:
Created 2 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

davegravycommented, Mar 16, 2022

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!

0reactions

lubber-decommented, Mar 16, 2022

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

Top Results From Across the Web

Create-React-App with TypeScript failing to compile after ...

But when I add import 'semantic-ui-css/semantic.min.css'; to index.tsx as instructed, I get a failed to compile error . Here's my index.

What Does Create-React-App Actually Do? | by Andrew Mc

Many people use create-react-app as an easy starting place for creating their React app ... These warnings are the cause of many of...

An In-Depth Guide for Create React App 5 (CRA 5)

Create React App (CRA) is a quick way to scaffold a React project. It can be easily generated by the command, npx create-react-app...

Error node-sass version 5 0 0 is incompatible with 4 0 0

scss file to the App component I am getting this error: Failed to compile. ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5 ...

error: node sass version 7.0.1 is incompatible with ^4.0.0.

Workaround: don't install node-sass 5.0.0 yet (the major version was just bumped). ... src/index.jsx 3:0-48 webpack 5.72.0 compiled with 1 error in 1583...