React – npm start 启动报错：“babel-loader“: “8.1.0“ 版本冲突问题（两种解决方案）


报错分析

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
## 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 模块，执行以下命令：
1
npm uninstall babel-loader
  1. 安装指定版本 babel-loader，执行以下命令：

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

1
2
## 版本号要根据你的版本来确定(绿色字)
npm install [email protected]

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

可能遇到的问题

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

直接 cd 到 C:\Users\Flutter 目录下，直接执行如下命令继续安装：

1
npm i -D [email protected]

在这里插入图片描述

在这里插入图片描述

二、解决方案

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

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

1
SKIP_PREFLIGHT_check = true

在这里插入图片描述

重新 npm start 运行即可解决。