解决nextron项目中npm安装@types/react的依赖冲突问题

我在使用@types/react包时遇到了问题。这是一个基于nextron项目搭建的小型UI项目，重装Windows系统前运行正常。

尝试用yarn和yarn dev重建项目，依赖安装过程无异常，但yarn dev报错：

# yarn dev
yarn run v1.22.19
$ nextron
ready - started server on 0.0.0.0:8888, url: http://localhost:8888
info  - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install @types/react by running:

        npm install --save-dev @types/react

按照提示执行命令后，出现更严重的错误：

npm install --save-dev @types/react
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @naisutech/react-tree@0.4.2
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"^16.6.0 || ^17" from next@10.2.3
npm ERR!   node_modules/next
npm ERR!     dev next@"^10.0.5" from the root project
npm ERR!   peer react@"^15.3.0 || 16 || 17 || 18" from react-copy-to-clipboard@5.1.0
npm ERR!   node_modules/react-copy-to-clipboard
npm ERR!     react-copy-to-clipboard@"^5.1.0" from the root project
npm ERR!   23 more (react-currency-input-field, react-datepicker, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.6" from @naisutech/react-tree@0.4.2
npm ERR! node_modules/@naisutech/react-tree
npm ERR!   @naisutech/react-tree@"^0.4.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8.6" from @naisutech/react-tree@0.4.2
npm ERR!   node_modules/@naisutech/react-tree
npm ERR!     @naisutech/react-tree@"^0.4.2" 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 C:\Users\Denny\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Denny\AppData\Local\npm-cache\_logs\2023-08-21T01_20_27_399Z-debug-0.log

之后尝试了以下操作：

• 使用nvm for Windows重装Node.js 16.20.2 LTS和18.17.1 LTS版本
• 删除node_modules文件夹和yarn.lock文件后重新安装所有依赖，但问题仍未解决

查看错误日志后发现，问题似乎出在react包版本与@types/react所需版本的冲突上。

项目的package.json内容如下：

"dependencies": {
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@naisutech/react-tree": "^0.4.2",
    "accounting-js": "^1.1.1",
    "axios": "^0.27.2",
    "decimal.js": "^10.3.1",
    "electron-serve": "^1.0.0",
    "exceljs": "^4.3.0",
    "file-saver": "^2.0.5",
    "handlebars": "^4.7.7",
    "html-loader": "^3.1.2",
    "moment": "^2.29.1",
    "next-images": "^1.7.0",
    "node-fetch": "^3.2.10",
    "numeral": "^2.0.6",
    "puppeteer": "^15.3.2",
    "puppeteer-report": "^3.0.3",
    "randomstring": "^1.2.2",
    "react-copy-to-clipboard": "^5.1.0",
    "react-currency-input-field": "^3.6.4",
    "react-datepicker": "^4.8.0",
    "react-select": "^3.1.1",
    "react-toastify": "^9.0.1",
    "string-sanitizer": "^2.0.2",
    "sweetalert2": "^11.4.17",
    "sweetalert2-react-content": "^5.0.0",
    "universal-cookie": "^4.0.4",
    "zustand": "^4.1.2"
  },
  "devDependencies": {
    "@material-ui/core": "^4.11.1",
    "@types/node": "^14.6.4",
    "@types/react": "^16.9.49",
    "@types/react-dom": "^16.9.8",
    "electron": "^13.0.0",
    "electron-builder": "^23.0.3",
    "next": "^10.0.5",
    "nextron": "^6.0.3",
    "react": "^17.0.2",
    "react-day-picker": "^7.4.8",
    "react-dom": "^17.0.2",
    "typescript": "^4.1.3"
  }

内容的提问来源于stack exchange，提问作者DennyHiu