报错分析
阅读报错信息不难发现,是说您用
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工程目录),执行以下步骤:
- 删除
package-lock.json
文件。 - 删除
node-modules
。 - 删除
babel-loader
模块,执行以下命令:
npm uninstall babel-loader
- 安装指定版本
babel-loader
,执行以下命令:
这里我们所注意的地方就是要按照错误信息提供的地址来进行安装版本,如下图所示:
先cd C:\Users\Flutter
(没有node_modules),然后再执行下面的安装。
## 版本号要根据你的版本来确定(绿色字)
npm install babel-loader@8.1.0
最后 npm start
启动即可,别忘了 cd
回项目根目录再执行。
可能遇到的问题
我这里刚解决完
babel-loader
后,又出现了webpack
版本问题,继续解决。
直接 cd
到 C:\Users\Flutter
目录下,直接执行如下命令继续安装:
npm i -D webpack@4.42.0
二、解决方案
注意:该方案不适用于 部署上线环境 因为可能出现未知错误。
在项目根目录创建一个 .env
文件,然后添加以下代码:
SKIP_PREFLIGHT_check = true
重新 npm start
运行即可解决。