Skip to content

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

Open
@davegravy

Description

@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

  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

image

Reproducible demo

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions