javascript - Tailwind - 自动前缀已经存在

安装 tailwind 时出现以下错误:

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

我正在使用以下 package.json 文件:

{
  "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"
    ]
  }
}

这是填充日志:

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

有什么建议我做错了吗?

感谢您的回复!

回答1

您的问题在于使用了多个相互冲突的 autoprefixer 版本。它们来自不同的包,例如 react-scripts。我注意到,虽然您的 react 与 date 相当,但您的 react-scripts 落后了两个主要版本(3.2.0 与 5.0.1)。这意味着中间发生了两次重大变化,这很容易解释冲突。如果您不确定这意味着什么,请前往 https://semver.org/ 获取解释。

我无法判断这是否能解决问题,但我会快速复制项目,从 package.json 中删除所有依赖项并运行 npm i babel-eslint react react-dom react-router react-scripts web3。有更复杂的方法可以做到这一点,但这会很快告诉你,如果更新所有包可以解决问题。