reactjs node.js npm dependencies npm-install

postcss@7 plugin failed: Cannot find module 'postcss-flexbugs-fixes'

Trying to fix the issue of

Loading PostCSS "postcss-flexbugs-fixes" plugin failed: Cannot find module 'postcss-flexbugs-fixes'

So I did npm install -D postcss-flexbugs-fixes, but got:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: whatscooking@0.1.0
npm ERR! Found: postcss@7.0.39
npm ERR! node_modules/postcss
npm ERR!   postcss@"^7.0.39" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer postcss@"^8.1.4" from postcss-flexbugs-fixes@5.0.2
npm ERR! node_modules/postcss-flexbugs-fixes
npm ERR!   dev postcss-flexbugs-fixes@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Here someone mentioned resolutions, but that seems to be a yarn feature. npm equivalent of yarn resolutions? says the solution is "overrides":,

but I don't know how to specify the "overrides": for my above specific case.

BTW,

I've also tried to upgrade postcss and postcss-flexbugs-fixes together, but that brings much more trouble:

$ npm install -D postcss postcss-flexbugs-fixes

npm WARN idealTree Removing dependencies.postcss in favor of devDependencies.postcss
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @craco/craco@6.3.0
npm ERR! Found: react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"^5.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-scripts@"^4.0.0" from @craco/craco@6.3.0
npm ERR! node_modules/@craco/craco
npm ERR!   @craco/craco@"^6.2.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react-scripts@4.0.3
npm ERR! node_modules/react-scripts
npm ERR!   peer react-scripts@"^4.0.0" from @craco/craco@6.3.0
npm ERR!   node_modules/@craco/craco
npm ERR!     @craco/craco@"^6.2.0" from the root project

Since I'm almost a npm noob, I'd prefer an easiest fix now, as the repo that I forked has been working fine before. Thus the question limites to, how to specify the "overrides": for my above specific case, if possible.

PS.

There seems to be at least three different version of postcss in my forked repo:

$ grep postcss package.json 
    "@tailwindcss/postcss7-compat": "^2.2.16",
    "postcss": "^7.0.39",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2",

$ npm ls postcss
+-+ @tailwindcss/postcss7-compat@2.2.16
| +-+ postcss-functions@3.0.0
| | +-- postcss@6.0.23
| +-+ postcss-js@2.0.3
| | +-- postcss@7.0.39 deduped
| +-+ postcss-nested@4.2.3
| | +-- postcss@7.0.39 deduped
| +-- postcss@7.0.39 deduped
| +-+ purgecss@4.0.3
|   +-- postcss@8.3.9
+-+ autoprefixer@9.8.6
| +-- postcss@7.0.39 deduped
+-- postcss@7.0.39
+-+ react-scripts@5.0.1 invalid: "^4.0.0" from node_modules/@craco/craco
| +-+ css-loader@6.8.1
| | +-+ icss-utils@5.1.0
| | | +-- postcss@8.4.31 deduped
| | +-+ postcss-modules-extract-imports@3.0.0
| | | +-- postcss@8.4.31 deduped
| | +-+ postcss-modules-local-by-default@4.0.3
| | | +-- postcss@8.4.31 deduped
. . .

Solution

Open your package.json file.
Inside your package.json, add an "overrides" field at the top level. This field will be an object where you can specify overrides for individual packages.
How to specify the "overrides" for your specific case:

     {
      "name": "your-project",
      "version": "1.0.0",
      "dependencies": {
        // Your other dependencies
      },
      "overrides": {
        "postcss-flexbugs-fixes": {
          "postcss": "^7.0.39"
        }
      }
    }