使用create-react-app创建工程时报错处理

news/2024/12/16 13:08:37/

1:全局安装create-react-app

npm install -g create-react-app

2:切换到项目要创建的目录下

cd /d G:\vsCode_project\react

3:使用脚手架命令创建工程

create-react-app 项目名

项目名命名要遵循npm包命名规范:数字、小写字母、_

4:错误解决:

当执行3创建工程时,可能会出现下面的错误:

原因解析:

@testing-library/react@13.4.0 需要 react@^18.0.0,而你的项目中使用的是 react@19.0.0。

由于本地使用的npm镜像源是淘宝的,很多库都还没有及时更新适配react19导致的。

解决办法:

一:逐步解决法:

缺点:繁琐

优点:错误分析直观,易于深入了解错误原因。

(1)、先使用cd命令切换到创建的项目名的文件夹内。

(2)、打开工程名对应的文件夹test1,找到package.json文件打开。

把里面的 react 和 react-dom 由19版本改为18版本。

 

然后在终端里执行以下命令安装18版本。

npm install

(3)、在终端执行以下命令启动项目

npm start

(4)、浏览器中打开以下地址访问工程站点。

localhost:3000

如果站点运行时浏览器页面提示以下错误:

此时终端里也有了错误提示:

解决办法:

(5)、终端里执行以下命令安装该丢失的web-vitals模块。

npm install web-vitals

(6)、终端执行以下命令重新启动工程。

npm start

此时浏览器里的项目就正常启动了。

二:一步到位解决法:

缺点:无法一步一步了解错误信息。

优点:方便快捷。

(1)、进入创建工程的目录内,把node_modules文件夹和package-lock.json文件删除。

(2)、打开配置文件package.json,按照下面的依赖项进行配置。

"dependencies": {"cra-template": "1.2.0","react": "^18.0.0","react-dom": "^18.0.0","@testing-library/react": "^13.4.0","react-scripts": "5.0.1","web-vitals":"^2.1.4"}

(3)、终端切换到工程目录内,使用npm install命令安装依赖包。

(4)、使用以下命令启动工程。

npm start

(5)、复制 http://localhost:3000 在浏览器中打开。

项目启动成功。


http://www.ppmy.cn/news/1555592.html

相关文章

关闭vmware提示 - 在该系统上全局禁用了虚拟打印功能,不会为该虚拟机启用此功能。虚拟设备“serial0“将开始断开连接。

效果图 实现步骤 虚拟操作系统关机编辑虚拟机设置 → 打印机 → 移除​​​​​​​ →​​​​​​​ 确定成功关闭提示效果

React基础学习

React基础 📣 📣 📣 📢📢📢 ☀️☀️点开就是缘分认识一下,我是小冷。是一个兴趣驱动自学练习两年半的的Java工程师。 📒 一位十分喜欢将知识分享出来的Java博主⭐️⭐️⭐️&#x…

crapy 爬虫框架的使用

1.scrapy框架安装 安装前先安装python3和pycharm 社区版 执行命令安装scrapy, pip install scrapy 2.创建项目 执行命令: scrapy startproject test_spider 如图: 3.使用pycharm大开项目并设置pipenv虚拟机环境 虚拟环境是为了依赖隔…

《C 语言携手 PaddlePaddle C++ API:开启深度学习开发新征程》

在深度学习领域,PaddlePaddle 作为一款强大的深度学习框架,为开发者提供了丰富的功能和高效的计算能力。而 C 语言,凭借其高效性和广泛的应用场景,与 PaddlePaddle 的 C API 相结合,能够为深度学习开发带来独特的优势。…

Https身份鉴权(小迪网络安全笔记~

附:完整笔记目录~ ps:本人小白,笔记均在个人理解基础上整理,若有错误欢迎指正! 5.2 Https&身份鉴权 引子:上一篇主要对Http数据包结构、内容做了介绍,本篇则聊聊Https、身份鉴权等技术。 …

基于 Couchbase 数据仓库元数据管理的可行性方案

在大数据体系中,元数据管理是数据治理的关键一环。以下是一套元数据管理的可行性方案,适合你的当前架构设计(基于 Couchbase 数据仓库)并支持高效管理数据的分层与结构。 1. 元数据管理的目标 统一数据管理:清晰描述 …

【k8s源码】kubernetes-1.22.3\staging 目录作用

文章目录 Kubernetes 中 staging 目录的作用1. 什么是 staging 目录?2. 为什么需要 staging 目录?背景问题解决方法 3. staging 目录的作用3.1 模块化开发3.2 管理跨模块依赖3.3 发布和版本化 4. staging 的工作原理4.1 源码结构4.2 构建过程4.3 模块发布…

Color-Light-Control-and-Four-Way-Responder based on STM32F103C8T6

Light Control and Responder 若要实现同样效果请看源码: gitee.com/apollo_666/Color-Light-Control-and-Four-Way-Responder # Abstract The design project for a decorative lighting controller enhanced our practical skills and engineering capabilities. During our…