React项目启动时ESLint上级目录版本冲突的解决指南

嘿，我碰到过好多次这种React项目里的ESlint版本冲突问题了，你执行npm start时遇到的这个报错，本质是依赖树里的版本不兼容，我来给你一步步解决：

问题详情 #

执行npm start后出现的命令输出：

new-app@0.1.0 start C:\Users\sachin\reactjs\new-app
react-scripts start

随后弹出的核心错误提示：

项目依赖树可能存在问题。这大概率不是Create React App的bug，而是需要您在本地修复的问题。Create React App提供的react-scripts包依赖特定版本："eslint": "^6.6.0"
请勿手动安装该依赖：包管理器会自动完成安装。
但检测到上级目录中存在不同版本的eslint：C:\Users\sachin\node_modules\eslint（版本：7.10.0）
手动安装不兼容版本会导致难以排查的问题。
若您希望忽略此检查，请在项目的.env文件中添加SKIP_PREFLIGHT_CHECK=true。这会永久禁用该提示，但您可能会遇到其他问题。

完整的npm报错日志：

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! new-app@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! 执行new-app@0.1.0的start脚本失败。
npm ERR! 这大概率不是npm的问题，上方可能有更多日志输出。
npm ERR! 本次运行的完整日志可在以下路径找到：
npm ERR! C:\Users\sachin\AppData\Roaming\npm-cache\_logs\2020-10-09T06_26_24_453Z-debug.log

修复步骤 #

优先尝试的核心步骤 #

请严格按顺序执行这些操作：

• 删除项目文件夹中的package-lock.json（注意不是package.json！）和/或yarn.lock文件
• 删除项目文件夹里的node_modules文件夹
• 打开项目的package.json文件，把eslint从dependencies和/或devDependencies列表中移除
• 根据你使用的包管理器，运行npm install或者yarn重新安装依赖

大部分情况下，做完这些步骤就能解决问题了。

若核心步骤无效，试试这些额外操作 #

• 如果你一直用npm，可以换成yarn来重复上面的核心步骤，有时候不同包管理器的依赖解析逻辑能避开这个问题
• 检查C:\Users\sachin\node_modules\eslint这个路径，确认它是不是在你的项目目录之外——比如你不小心在用户主目录全局安装了某个带ESlint的包，导致版本冲突
• 在项目文件夹的终端里运行npm ls eslint，这个命令会列出所有安装了ESlint的包，帮你找到除了react-scripts之外的其他来源

最后的兜底方案 #

如果上面所有方法都没用，你可以在项目的.env文件里添加SKIP_PREFLIGHT_CHECK=true，这会永久禁用Create React App的依赖预检检查，让你能继续运行项目，但要注意这可能会埋下其他依赖兼容的隐患，所以尽量优先用前面的方法。

内容的提问来源于stack exchange，提问作者sai sachin reddy