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

1:全局安装create-react-app

bash 复制代码
npm install -g create-react-app

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

bash 复制代码
cd /d G:\vsCode_project\react

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

bash 复制代码
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版本。

bash 复制代码
npm install

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

bash 复制代码
npm start

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

bash 复制代码
localhost:3000

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

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

解决办法:

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

bash 复制代码
npm install web-vitals

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

bash 复制代码
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 在浏览器中打开。

项目启动成功。

相关推荐
Bellafu6661 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird4 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者5 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强5 小时前
Chrome和IE获取本机ip地址
前端
天***88965 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*5 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls6 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友6 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵6 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机7 小时前
Promise 常见面试题(持续更新中)
前端·javascript