一、处理方案
- 这是因为"@types/react"、"@types/react-dom"在子依赖中使用的版本不一致导致,一般情况npm会自动帮我们处理版本不一致的问题。如果npm处理不了,就需要我们自己手动处理
- 在package.json中添加一项配置
{name:"test",version:"1.0.0",...,"devDependencies": {"@types/react": "17.0.0","@types/react-dom": "17.0.0"},"resolutions": {"@types/react": "17.0.0","@types/react-dom": "17.0.0"}, }
- 在package.json中的scripts中添加一行命令
{"scripts":{"preinstall": "npx force-resolutions"} }
- 配置完成之后要执行一次preinstall命令:npm run preinstall 。如果执行命令后还是会有报错,执行 npm i 安装全部依赖,再次执行 npm run preinstall
二、原因
以下内容引用自:package.json中的resolutions作用_package.json resolutions-CSDN博客
resolutions 是一个用于解决依赖项冲突的 npm 特殊字段。在某些情况下,您的项目依赖项可能需要不同的版本,而这些版本之间可能存在冲突。这时候,您可以使用 resolutions 字段来指定应该使用哪个版本,以解决这些冲突。
例如,如果您的项目依赖于 package-a 和 package-b,而这两个包都依赖于 package-c,但它们依赖于 package-c 的不同版本,这会导致冲突。在这种情况下,您可以在 package.json 文件中使用 resolutions 字段来指定应该使用哪个版本。例如:
{"dependencies": {"package-a": "^1.0.0","package-b": "^2.0.0"},"resolutions": {"package-c": "^1.2.0"}
}
在这个示例中,我们指定了 package-c 的版本应该是 ^1.2.0。这意味着当 npm 安装依赖项时,它将使用 1.2.x 系列中的最新版本来解决 package-a 和 package-b 之间的冲突。
需要注意的是,resolutions 字段只在您的项目依赖项中出现冲突时才需要使用。在大多数情况下,npm 可以自动解决依赖项之间的冲突,而无需使用 resolutions 字段。
当某些安全扫描工具(例如fossa)扫描出项目依赖的子依赖版本需要升级的情况,也可以尝试使用此方法来解决。
在package.json文件里添加跟scripts、dependencies、evDependencies平级的resolutions,把想要强制升级的子依赖期望版本写入,scripts里添加配置"preinstall": "npx force-resolutions",最后像启动项目一样使用npm run preinstall运行下载,最后达成目的。
{"name": "xxx","version": "1.0.0","description": "xxx","author": "xxx","private": true,"scripts": {"dev": "webpack-dev-server --inline --hot --progress --config build/webpack.dev.conf.js","start": "npm run dev","unit": "jest --config test/unit/jest.conf.js --coverage","e2e": "node test/e2e/runner.js","test": "npm run unit && npm run e2e","build": "node build/build.js","preinstall": "npx force-resolutions"},"dependencies": {"@types/echarts": "0.0.13","ajv": "^6.12.6","awe-dnd": "^0.3.4","axios": "^0.26.0","babel-polyfill": "^6.26.0"},"devDependencies": {"vue-template-compiler": "^2.6.11","webpack": "^3.12.0","webpack-bundle-analyzer": "^2.13.1","webpack-merge": "^4.2.2"},"resolutions": {"lodash.template": "4.5.0","eventsource": "1.1.1","ms":"https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"},"engines": {"node": ">= 12.0.0","npm": ">= 3.0.0"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"]
}