CRA React应用执行npm start时出现webpack版本冲突报错求助

我刚看到你在Create React App（CRA）项目里执行npm start时遇到了webpack版本冲突的报错，尝试卸载重装webpack没解决，只有通过设置SKIP_PREFLIGHT_CHECK=true才能临时运行。我来帮你梳理下问题根源和完整的解决办法：

报错日志详情 #

hello@0.1.0 start C:\Users\USER\Desktop\MyReact\REACT_HOOKS\hello
react-scripts start

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

修复依赖树请严格按照以下步骤执行：
1. 删除项目文件夹中的package-lock.json（不是package.json！）和/或yarn.lock
2. 删除项目文件夹中的node_modules
3. 在项目的package.json文件的dependencies和/或devDependencies中移除"webpack"
4. 根据您使用的包管理器，执行npm install或yarn

大多数情况下，以上步骤足以解决问题。如果无效，您可以尝试以下方法：
- 如果您使用npm，请安装yarn并改用yarn重复上述步骤。这可能会有帮助，因为npm存在已知的包提升问题，该问题可能在未来版本中修复。
- 检查C:\Users\USER\node_modules\webpack是否位于项目目录之外。例如，您可能不小心在主目录中安装了某些内容。
- 在项目文件夹中执行npm ls webpack命令。这会告诉您除预期的react-scripts外，还有哪个包安装了webpack。

如果以上方法都无效，请在项目的.env文件中添加SKIP_PREFLIGHT_CHECK=true。这会永久禁用此预检查，以便您继续操作。

附：我们知道这条信息很长，但请务必阅读上述步骤😊 希望这些方法对您有帮助！

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hello@0.1.0 start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! 执行hello@0.1.0的start脚本失败。
npm ERR! 这大概率不是npm的问题。上方可能有更多日志输出。

问题根源 #

这个报错的核心原因是项目目录的上层（比如你的用户目录C:\Users\USER）存在一个和react-scripts依赖的webpack版本不兼容的实例——react-scripts要求webpack@4.42.0，但上层目录安装了4.43.0，包管理器的依赖提升机制导致CRA检测到了这个不兼容版本，从而阻止项目启动。

优先推荐的修复步骤 #

• 删除项目根目录下的package-lock.json（注意别删成package.json）或yarn.lock文件：清除之前锁定的依赖版本记录，避免旧版本干扰。
• 删除项目内的node_modules文件夹：彻底移除当前安装的所有依赖，确保重新安装时是干净的环境。
• 检查项目的package.json：如果dependencies或devDependencies里手动添加了webpack依赖，一定要移除它——CRA的react-scripts已经内置了适配好的webpack版本，手动安装会直接导致版本冲突。
• 重新执行依赖安装：根据你用的包管理器，运行npm install或者yarn install，让包管理器重新拉取匹配的依赖版本。

进阶排查方法（若上述步骤无效） #

• 切换到yarn试试：npm的包提升机制偶尔会出现这类跨目录的依赖冲突，安装yarn后重复上面的修复步骤，可能能解决问题。
• 清理上层目录的webpack：检查C:\Users\USER\node_modules\webpack这个目录，它是在你的项目外安装的，大概率是不小心全局安装或者在用户目录下执行了npm install webpack导致的，手动删除这个目录就能消除冲突源。
• 排查额外的webpack依赖：在项目根目录执行npm ls webpack命令，这个命令会列出所有引入webpack的包，帮你找到除了react-scripts之外，还有哪个第三方包引入了不兼容的webpack版本，你可以针对性地升级或替换这个包。

临时绕过方案 #

如果所有修复方法都无效，你可以用已经试过的方法：在项目根目录创建.env文件，添加SKIP_PREFLIGHT_CHECK=true。但要注意，这只是跳过了CRA的预检查，并没有真正解决依赖冲突，后续可能会遇到其他奇怪的问题，所以只建议在紧急情况下使用，还是优先尝试前面的修复步骤。

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