项目启功需要添加SKIP_PREFLIGHT_CHECK=true该怎么办?

遇到问题不要慌:查资料→破难题→记妙招,今日份成长已签收! 👍 👍👍对对对!

分析这个问题的原因是依赖冲突导致的,然而为什么会有依赖冲突?Node.js 采用嵌套式依赖结构,当不同层级的包对同一依赖要求不同版本时,就会触发冲突。例如:

  • A 包依赖 lodash@^4.0.0
  • B 包依赖 lodash@^5.0.0
    此时 npm 需要裁决最终安装哪个版本,若无法调和则报错退出。

当执行 npm install 遇到依赖冲突时,可以使用 --force--legacy-peer-deps 参数来解决问题。

  • --force‌:这个参数会强制 npm 获取远程资源,即使磁盘上存在本地副本也是如此。它可能会忽略一些依赖冲突,但可能会导致不稳定的依赖关系,因此应谨慎使用。

  • ‌--legacy-peer-deps‌:这个参数是在 npm v7 中引入的,用于在安装时忽略所有 peerDependencies,采用 npm 版本 4 到版本 6 的样式。在很多情况下,npm v7 默认安装 peerDependencies 会导致版本冲突,从而中断安装过程。使用 --legacy-peer-deps 可以绕过这些冲突,继续安装。

之前项目都能正常使用,不知道做了什么,然后再执行npm install 的时候就会出现这种提示,很是烦人,不添加 --force 还安装不成功。
如果添加了`--force` 在启动的时候又会出现如下问题,虽然添加了`SKIP_PREFLIGHT_CHECK=true` 可以解决问题,也很麻烦。

javascript 复制代码
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

接下来要分析原因。根据报错信息,Create React App工具链会进行预检(preflight check),确保依赖树中的特定包版本符合要求。例如,react-scripts可能需要某个确切版本的webpack,如果项目中存在更高或更低的版本,就会触发这个错误。这时候有两种选择:要么修复依赖关系,要么用SKIP_PREFLIGHT_CHECK=true来跳过检查。

⚠️ 警告:以上方法均属权宜之计,可能导致运行时不可预料的错误!建议仅用于紧急恢复开发环境。

使用npm ls webpack命令查看webpack版本,果然发现了异类,这个时候就要分析这个依赖了,如果能修复尽量修复,我是经过反复查找,发现项目中没有使用,然后就删除了,接下来删除lock文件或node_modules重新安装依赖,问题完美解决。

如果实在解决不了,还是老老实实的在 .env 文件中添加SKIP_PREFLIGHT_CHECK=true吧。此操作将永久禁用 Create React App 的依赖树前置检查机制。

相关推荐
不想上班只想要钱22 分钟前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌41 分钟前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静1 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
金士顿1 小时前
为什么MainWindow.xaml绑定的datacontext,EtherCATSuiteCtrl.xaml直接用了?
前端
533_1 小时前
[css] flex布局中的英文字母不换行问题
前端·css
浮游本尊2 小时前
React 18.x 学习计划 - 第四天:React Hooks深入
前端·学习·react.js
future_studio2 小时前
聊聊 Unity(小白专享、C# 小程序 之 日历、小闹钟)
前端·html
Yeats_Liao2 小时前
Go Web 编程快速入门 · 04 - 请求对象 Request:头、体与查询参数
前端·golang·iphone
祈祷苍天赐我java之术3 小时前
Redis 数据类型与使用场景
java·开发语言·前端·redis·分布式·spring·bootstrap
草莓熊Lotso3 小时前
C++ 方向 Web 自动化测试入门指南:从概念到 Selenium 实战
前端·c++·python·selenium