当前位置: 首页 > news >正文

react 报错

报错分析

阅读报错信息不难发现,是说您用 create-react-app 命令创建项目时所用到的 babel-loader 依赖为 8.1.0 版本,但您项目下 node_modules 包下的 babel-loader 版本为 8.0.6

所以导致 版本冲突 无法启动项目问题,报错信息中,React 其实已经给出了解决方案。
在这里插入图片描述

## SEOThere might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.The react-scripts package provided by Create React App requires a dependency:"babel-loader": "8.1.0"Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:C:\Users\Flutter\node_modules\babel-loader (version: 8.0.6)Manually installing incompatible versions is known to cause hard-to-debug issues.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.

一、解决方案

在这里插入图片描述

打开项目文件夹(React工程目录),执行以下步骤:

  1. 删除 package-lock.json 文件。
  2. 删除 node-modules
  3. 删除 babel-loader 模块,执行以下命令:
npm uninstall babel-loader
  1. 安装指定版本 babel-loader,执行以下命令:

这里我们所注意的地方就是要按照错误信息提供的地址来进行安装版本,如下图所示:
在这里插入图片描述
cd C:\Users\Flutter (没有node_modules),然后再执行下面的安装。

## 版本号要根据你的版本来确定(绿色字)
npm install babel-loader@8.1.0

在这里插入图片描述
最后 npm start 启动即可,别忘了 cd 回项目根目录再执行。

可能遇到的问题

我这里刚解决完 babel-loader 后,又出现了 webpack 版本问题,继续解决。

直接 cdC:\Users\Flutter 目录下,直接执行如下命令继续安装:

npm i -D webpack@4.42.0

在这里插入图片描述

在这里插入图片描述

二、解决方案

注意:该方案不适用于 部署上线环境 因为可能出现未知错误。

在这里插入图片描述
在项目根目录创建一个 .env 文件,然后添加以下代码:

SKIP_PREFLIGHT_check = true

在这里插入图片描述

重新 npm start 运行即可解决。

相关文章:

  • TortoiseGit 入门指南
  • [特殊字符] 深入理解Spring Cloud与微服务架构:全流程详解(含中间件分类与实战经验)
  • 什么是函数依赖中的 **自反律(Reflexivity)**、**增广律(Augmentation)** 和 **传递律(Transitivity)?
  • 大模型奖励建模新突破!Inference-Time Scaling for Generalist Reward Modeling
  • Python爬虫-爬取汽车之家各品牌月销量榜数据
  • Pygame终极项目:从零开发一个完整2D游戏
  • 一键快速转换音频视频格式的实用工具
  • Linux进程解析
  • Java操作数据库(JDBC)
  • C++异步并发支持库future
  • FPGA前瞻篇-组合逻辑电路设计-多路复用器
  • 云原生--核心组件-容器篇-3-Docker核心之-镜像
  • 我是如何用AI编程制作一个AI表情包生成的小程序
  • 大模型微调与蒸馏的差异性与相似性分析
  • (四) 实战Trae 编译调试C++项目(以minidocx为例)
  • 【学习】Codeforces Round 786 (Div. 3)G. Remove Directed Edges
  • strcmp()在C语言中怎么用(附带实例)
  • .NET8 依赖注入组件
  • day003-重置密码
  • React 与 Vue 的区别:你会选择哪个框架呢
  • 新剧|《淮水竹亭》明开播:前作扑街,本作能否改命
  • 观察|上海算力生态蓬勃发展,如何助力千行百业数智化转型升级
  • 四川省人大常委会原党组成员、副主任宋朝华接受审查调查
  • 云南省委常委、组织部部长刘非任浙江省委常委、杭州市委书记
  • 刘非任中共浙江省委常委、杭州市委书记
  • 商务部召开外资企业圆桌会