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

react报错解决

报错分析

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

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

## SEO

There 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 运行即可解决。


http://www.kler.cn/a/468168.html

相关文章:

  • Linux中rsync命令使用
  • 深度学习中的正则化方法
  • AI在电子制造中的应用:预测质量控制
  • 数据结构知识收集尊享版(迅速了解回顾相关知识)
  • Go语言的 的集合框架(Collections Framework)核心知识
  • [python3]Excel解析库-xlutils
  • 1、pycharm、python下载与安装
  • 服务器信息整理:用途、操作系统安装日期、设备序列化、IP、MAC地址、BIOS时间、系统
  • 什么是Kafka的重平衡机制?
  • 小红书怎么看ip所属地?小红书ip属地为什么可以变
  • 基于Spring Boot的健康饮食管理系统
  • 开发培训:慧集通(DataLinkX)iPaaS集成平台-基于接口的组件开发
  • WebSocket 基础入门:协议原理与实现
  • Appllo学习
  • MySQL 索引分类及区别与特点
  • OkHttp接口自动化之断言
  • 基于Spring Boot的智能笔记的开发与应用
  • 自动化文件监控与分类压缩:实现高效文件管理
  • 第十一章 图论
  • SSH相关
  • Jmeter进阶篇(32)Jmeter 在 MySQL 数据库压测中的应用
  • Electron不支持 jquery ,angularjs解决办法
  • 游戏引擎学习第73天
  • 在AWS Lambda上部署Python应用:从入门到实战
  • 51单片机——共阴数码管实验
  • 将 Docker 数据迁移到新磁盘:详细操作指南