react报错解决

报错分析

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

所以导致 版本冲突 无法启动项目问题,报错信息中,React 其实已经给出了解决方案。

bash 复制代码
## 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 模块,执行以下命令:
bash 复制代码
npm uninstall babel-loader
  1. 安装指定版本 babel-loader,执行以下命令:

这里我们所注意的地方就是要按照错误信息提供的地址来进行安装版本,如下图所示:

cd C:\Users\Flutter (没有node_modules),然后再执行下面的安装。

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

最后 npm start 启动即可,别忘了 cd 回项目根目录再执行。

可能遇到的问题

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

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

bash 复制代码
npm i -D webpack@4.42.0

二、解决方案

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

在项目根目录创建一个 .env 文件,然后添加以下代码:

bash 复制代码
SKIP_PREFLIGHT_check = true

重新 npm start 运行即可解决。

相关推荐
刘较瘦_16 分钟前
AI 开发中的 Git Submodule 父子仓库模式:前后端分仓管理与协作实践
前端·github
牧艺29 分钟前
cos-design WeatherBackground:用 Canvas 做一个「会变天」的背景引擎
前端·canvas·视觉设计
OpenTiny社区34 分钟前
深度解析 LSP 如何为 AI 装上“眼睛”
前端·ai编程
布列瑟农的星空42 分钟前
流程类SVG画布的通用开发范式
前端
fsssb1 小时前
Chromium 源码学习笔记(七):那些跨进程的调用,底下都是同一个东西——Mojo
前端
gis开发之家1 小时前
《Vue3 从入门到大神35篇》Vue3 源码详解(五):effect 依赖收集原理——track 与 trigger 是如何工作的?
javascript·typescript·前端框架·vue3·vue3源码
MichaelJohn1 小时前
从零星白屏到“启发式缓存”,记录一次刚接手屎山的惊险排查
前端
程序员黑豆2 小时前
鸿蒙应用开发:6种图片加载方式详解
前端·华为·harmonyos
半个落月2 小时前
用 React 搭一个 WebGPU 模型加载页:从状态驱动到可复用进度条
前端·react.js
雪隐2 小时前
个人电脑玩AI-13让5060 Ti给你打工——我用 0.9B 小模型终结了"谁来记会议纪要"这个世纪难题
前端·人工智能·后端