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: [email protected]
npm ERR! Found: [email protected]
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 [email protected]
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/[email protected]
npm ERR! Found: [email protected]
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/[email protected]
npm ERR! node_modules/@craco/craco
npm ERR!   @craco/craco@"^6.2.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react-scripts
npm ERR!   peer react-scripts@"^4.0.0" from @craco/[email protected]
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/[email protected]
|  -  [email protected]
| |  -- [email protected]
|  -  [email protected]
| |  -- [email protected] deduped
|  -  [email protected]
| |  -- [email protected] deduped
|  -- [email protected] deduped
|  -  [email protected]
|    -- [email protected]
 -  [email protected]
|  -- [email protected] deduped
 -- [email protected]
 -  [email protected] invalid: "^4.0.0" from node_modules/@craco/craco
|  -  [email protected]
| |  -  [email protected]
| | |  -- [email protected] deduped
| |  -  [email protected]
| | |  -- [email protected] deduped
| |  -  postcss-module[email protected]
| | |  -- [email protected] deduped
. . .

CodePudding user response：

1. Open your package.json file.
2. 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.
3. 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"
        }
      }
    }