Tailwind - Autoprefixer already exists

Question

when installing tailwind I get the following error:

admin@admin-VirtualBox:~/Desktop/Code/react_app/client$ npm install -D tailwindcss postcss autoprefixer
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-app@1.0
npm ERR! Found: autoprefixer@9.7.1
npm ERR! node_modules/autoprefixer
npm ERR!   autoprefixer@"^9.6.1" from postcss-preset-env@6.7.0
npm ERR!   node_modules/postcss-preset-env
npm ERR!     postcss-preset-env@"6.7.0" from react-scripts@3.2.0
npm ERR!     node_modules/react-scripts
npm ERR!       react-scripts@"3.2.0" from the root project
npm ERR!   dev autoprefixer@"*" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev autoprefixer@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: postcss@8.4.13
npm ERR! node_modules/postcss
npm ERR!   peer postcss@"^8.1.0" from autoprefixer@10.4.7
npm ERR!   node_modules/autoprefixer
npm ERR!     dev autoprefixer@"*" 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.
npm ERR! 
npm ERR! See /home/admin/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/admin/.npm/_logs/2022-05-17T19_33_57_115Z-debug-0.log

I am using the following package.json file:

{
  "name": "react-app",
  "version": "1.0",
  "private": true,
  "dependencies": {
    "babel-eslint": "10.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.3.0",
    "react-scripts": "3.2.0",
    "web3": "^1.6.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

This is the fill log:

0 verbose cli [
0 verbose cli   '/usr/local/bin/node',
0 verbose cli   '/usr/local/bin/npm',
0 verbose cli   'install',
0 verbose cli   '-D',
0 verbose cli   'tailwindcss',
0 verbose cli   'postcss',
0 verbose cli   'autoprefixer'
0 verbose cli ]
1 info using npm@8.5.5
2 info using node@v16.15.0
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 8ms
6 timing config:load:builtin Completed in 8ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:/home/admin/Desktop/Code/react_app/client/.npmrc Completed in 0ms
10 timing config:load:project Completed in 2ms
11 timing config:load:file:/home/admin/.npmrc Completed in 1ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:/usr/local/etc/npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 14ms
19 timing npm:load:configload Completed in 14ms
20 timing npm:load:setTitle Completed in 0ms
21 timing config:load:flatten Completed in 2ms
22 timing npm:load:display Completed in 3ms
23 verbose logfile /home/admin/.npm/_logs/2022-05-17T19_33_57_115Z-debug-0.log
24 timing npm:load:logFile Completed in 2ms
25 timing npm:load:timers Completed in 0ms
26 timing npm:load:configScope Completed in 0ms
27 timing npm:load Completed in 19ms
28 timing arborist:ctor Completed in 1ms
29 silly logfile start cleaning logs, removing 1 files
30 timing idealTree:init Completed in 769ms
31 timing idealTree:userRequests Completed in 1ms
32 silly idealTree buildDeps
33 silly fetch manifest tailwindcss@*
34 timing arborist:ctor Completed in 0ms
35 http fetch GET 200 https://registry.npmjs.org/tailwindcss 796ms (cache hit)
36 silly fetch manifest postcss@*
37 http fetch GET 200 https://registry.npmjs.org/postcss 8ms (cache hit)
38 silly fetch manifest autoprefixer@*
39 http fetch GET 200 https://registry.npmjs.org/autoprefixer 5ms (cache hit)
40 timing idealTree Completed in 1610ms
41 timing command:install Completed in 1615ms
42 verbose stack Error: could not resolve
42 verbose stack     at PlaceDep.failPeerConflict (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/place-dep.js:546:25)
42 verbose stack     at PlaceDep.place (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/place-dep.js:197:21)
42 verbose stack     at new PlaceDep (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/place-dep.js:71:10)
42 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:964:31
42 verbose stack     at Array.map (<anonymous>)
42 verbose stack     at Arborist.[buildDepStep] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:964:8)
42 verbose stack     at async Arborist.buildIdealTree (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:216:7)
42 verbose stack     at async Promise.all (index 1)
42 verbose stack     at async Arborist.reify (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:153:5)
42 verbose stack     at async Install.exec (/usr/local/lib/node_modules/npm/lib/commands/install.js:159:5)
43 verbose cwd /home/admin/Desktop/Code/react_app/client
44 verbose Linux 5.13.0-40-generic
45 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-D" "tailwindcss" "postcss" "autoprefixer"
46 verbose node v16.15.0
47 verbose npm  v8.5.5
48 error code ERESOLVE
49 error ERESOLVE could not resolve
50 error
51 error While resolving: [1mreact-app[22m@[1m1.0[22m
51 error Found: [1mautoprefixer[22m@[1m9.7.1[22m[2m[22m
51 error [2mnode_modules/autoprefixer[22m
51 error   [1mautoprefixer[22m@"[1m^9.6.1[22m" from [1mpostcss-preset-env[22m@[1m6.7.0[22m[2m[22m
51 error   [2mnode_modules/postcss-preset-env[22m
51 error     [1mpostcss-preset-env[22m@"[1m6.7.0[22m" from [1mreact-scripts[22m@[1m3.2.0[22m[2m[22m
51 error     [2mnode_modules/react-scripts[22m
51 error       [1mreact-scripts[22m@"[1m3.2.0[22m" from the root project
51 error   [33mdev[39m [1mautoprefixer[22m@"[1m*[22m" from the root project
51 error
51 error Could not resolve dependency:
51 error [33mdev[39m [1mautoprefixer[22m@"[1m*[22m" from the root project
51 error
51 error Conflicting peer dependency: [1mpostcss[22m@[1m8.4.13[22m[2m[22m
51 error [2mnode_modules/postcss[22m
51 error   [35mpeer[39m [1mpostcss[22m@"[1m^8.1.0[22m" from [1mautoprefixer[22m@[1m10.4.7[22m[2m[22m
51 error   [2mnode_modules/autoprefixer[22m
51 error     [33mdev[39m [1mautoprefixer[22m@"[1m*[22m" from the root project
51 error
51 error Fix the upstream dependency conflict, or retry
51 error this command with --force, or --legacy-peer-deps
51 error to accept an incorrect (and potentially broken) dependency resolution.
51 error
51 error See /home/admin/.npm/eresolve-report.txt for a full report.
52 verbose exit 1
53 timing npm Completed in 1755ms
54 verbose unfinished npm timer reify 1652816037244
55 verbose unfinished npm timer reify:loadTrees 1652816037246
56 verbose unfinished npm timer idealTree:buildDeps 1652816038016
57 verbose unfinished npm timer idealTree:#root 1652816038016
58 verbose code 1
59 error A complete log of this run can be found in:
59 error     /home/admin/.npm/_logs/2022-05-17T19_33_57_115Z-debug-0.log

Any suggestions what I am doing wrong?

I appreciate your replies!

Answer 1

Your problem lies in using multiple conflicting versions of autoprefixer . Those come from different packages, for instance react-scripts . I noticed that, while your react is pretty up-to-date, your react-scripts are two major versions behind (3.2.0 vs. 5.0.1). This means there have been two times breaking changes in between, which could easily explain the conflict. If you aren't sure what that means, head over to Semver for an explanation.

I can't possibly tell if this is going to resolve the problem, but I would make a quick copy of the project, remove all dependencies from package.json and run npm i babel-eslint react react-dom react-router react-scripts web3 . There are more sophisticated ways to do this, but this would quickly tell you, if updating all packages fixes the problem.