当前位置: 首页 > 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 运行即可解决。

http://www.xdnf.cn/news/152497.html

相关文章:

  • 路由交换网络专题 | 第八章 | GVRP配置 | 端口安全 | 端口隔离 | Mux-VLAN | Hybrid
  • SinSR模型剪枝实验报告
  • 【LeetCode 热题 100】链表 系列
  • WPF实现数字孪生示例
  • linux socket编程之tcp(实现客户端和服务端消息的发送和接收)
  • 北斗导航 | 基于Transformer+LSTM+激光雷达的接收机自主完好性监测算法研究
  • Ext JS模拟后端数据之SimManager
  • 模型识别能力锤炼及清单
  • 8.学习笔记-Maven进阶(P82-P89)
  • AI数字人:未来职业的重塑(9/10)
  • 【高频考点精讲】第三方库安全审计:如何避免引入带漏洞的npm包
  • springboot入门-service层构造器注入原理
  • 推荐系统FM模型
  • 2025.4.26_STM32_SPI
  • 29、简要描述三层架构开发模式以及三层架构有哪些好处?
  • Vue3中AbortController取消请求的用法详解
  • Log4j Properties 配置项详细说明
  • 如何判断你的PyTorch是GPU版还是CPU版?
  • 4.23-4.26学习总结 HTML—CSS常见标签和样式
  • 实验四 进程调度实验
  • Adriuno:编程语言基础
  • 使用 Truffle 和 Ganache 搭建本地以太坊开发环境并部署一个简单智能合约
  • [mysql]约束(上)
  • 使用 Frida 绕过 iOS 应用程序中的越狱检测
  • 自动化测试实战篇
  • 【Web应用服务器_Tomcat】二、Tomcat 核心配置与集群搭建
  • 关于Code_流苏:商务合作、产品开发、计算机科普、自媒体运营,一起见证科技与艺术的交融!
  • Kettle学习
  • 利器善其事:软件开发工具管理之道
  • Sam算法基本原理解析