当前位置: 首页 > news >正文

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

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 在浏览器中打开。

项目启动成功。

相关文章:

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

1:全局安装create-react-app npm install -g create-react-app 2:切换到项目要创建的目录下 cd /d G:\vsCode_project\react 3:使用脚手架命令创建工程 create-react-app 项目名 项目名命名要遵循npm包命名规范:数字、小写字…...

C# 探险之旅:第三十五节 - 类型class之抽象类 (Abstract Class) 和 抽象方法 (Abstract Method)

👋 嗨,勇敢的探险家们!欢迎再次踏上C#的神秘之旅。今天,我们要进入一片既神秘又充满无限可能的领域——抽象类与抽象函数的奇幻森林。想象一下,你是一名勇敢的骑士,要在这片森林里寻找传说中的“编程之宝”…...

qt-C++笔记之父类窗口、父类控件、对象树的关系

qt-C笔记之父类窗口、父类控件、对象树的关系 code review! 参考笔记 1.qt-C笔记之父类窗口、父类控件、对象树的关系 2.qt-C笔记之继承自 QWidget和继承自QObject 并通过 getWidget() 显示窗口或控件时的区别和原理 3.qt-C笔记之自定义类继承自 QObject 与 QWidget 及开发方式…...

Cisco Packet Tarcer配置计网实验笔记

文章目录 概要整体架构流程网络设备互连基础拓扑图拓扑说明配置步骤 RIP/OSPF混合路由拓扑图拓扑说明配置步骤 BGP协议拓扑图拓扑说明配置步骤 ACL访问控制拓扑图拓扑说明配置步骤 HSRP冗余网关拓扑图拓扑说明配置步骤 小结 概要 一些环境配置笔记 整体架构流程 网络设备互连…...

使用torch模拟 BMM int8量化计算。

使用torch模型BMM int8计算。 模拟:BMM->softmax->BMM 计算流程 import torch import numpy as np torch.manual_seed(777) def int8_quantize_per_token(x: torch.Tensor, axis: int -1, attnsFalse):if x.dtype ! torch.float32:x x.type(torch.float32)…...

【FreeMarker】实现生成Controller根据模板勾选的内容查询

需求:根据模板列表勾选的字段查询列表数据 FreeMarker代码: /*** 分页列表查询** param ${entityName?uncap_first}* param pageNo* param pageSize* param req* return*///AutoLog(value "${tableVo.ftlDescription}-分页列表查询")ApiOp…...

深入理解 XPath:XML 和 HTML 文档的利器

XPath(XML Path Language)是一种用于在 XML 和 HTML 文档中定位节点的语言。它常用于 XML 解析、Web 数据抓取(如 Selenium 或 Scrapy)以及配置文件解析。本文将带你深入了解 XPath 的语法、功能及其在实际中的应用。 目录 一、什…...

DDR5 中的数据反馈判决均衡(DFE):全面解析与展望

目录 一、引言二、DFE原理三、DFE架构四、实现方案五、测试方法六、DFE效果七、成本与收益八、具体应用九、技术发展趋势十、参考文献 一、引言 DDR5 作为新一代内存标准,其中的数据反馈判决均衡(DFE)技术更是引人注目。DFE即判决反馈均衡&a…...

Axure高保真数据可视化大屏图表组件库

推出了一款高保真数据可视化大屏图表组件库,旨在为用户提供丰富的图表类型,使数据呈现更加直观、生动。本文将详细介绍该组件库中的各类图表元件,包括面积图、折线图、柱状图、条形图、圆环图、雷达图、仪表图以及综合类图表,以满…...

100个问题学 langchain 入门 (1/10)

100个问题学 langchain 入门 (1/10) 文章目录 100个问题学 langchain 入门 (1/10)前言**问题 1** 什么是 langchain,解决什么问题?**问题 2** LangChain 的核心组件有哪些?请列举并简要说明每个组件的作用。**问题 3** 在 LangChain 中&#…...

0001.基于springmvc简易酒店管理系统后台

一.系统架构 springmvcjsplayuimysql 二.功能特性 简单易学习,虽然版本比较老但是部署方便,tomcat环境即可启用;代码简洁,前后端代码提供可统一学习;祝愿您能成尽快为一位合格的程序员,愿世界没有BUG; …...

每日一题 326. 3 的幂

326. 3 的幂 简单 class Solution { public:bool isPowerOfThree(int n) {while(n > 3){if(n % 3 0){n n/3;}else{return false;}}return n 1;} };...

解码数据有序之道——常见排序算法总结

本文整理了常见的排序算法,采用c编码,并对其时间复杂度作以了分析。 1. 冒泡排序(Bubble Sort) 实现思路: 从数组的第一个元素开始,依次比较相邻的两个元素。如果当前元素大于下一个元素,则交…...

C语言实现图片文件的复制

在C语言中&#xff0c;直接处理图片文件&#xff08;如JPEG、PNG等&#xff09;的复制&#xff0c;通常涉及到文件I/O操作。这些图片文件是二进制文件&#xff0c;因此需要使用二进制模式读取和写入文件。 图片文件复制代码&#xff1a; #include <stdio.h> #include&l…...

一、windows上配置ninja环境

Ninja是Google的一名程序员推出的注重速度的构建工具&#xff0c;一般在Unix/Linux上的程序通过make/makefile来构建编译&#xff0c;而Ninja通过将编译任务并行组织&#xff0c;大大提高了构建速度。下面介绍了windows上配置Ninja环境。 1.下载Ninja ninja官网地址&#xff1…...

我们来编程 -- win11多jdk版本切换

题记 售前的酒喝到位了调研需求及文档整理出来了开发要入场了&#xff0c;真惨啊&#xff01;年底了&#xff0c;手里活干的好好的&#xff0c;因为flyback在项目地&#xff0c;硬是被安排进来了拥抱变化&#xff0c;我呸…不得不切换系统&#xff0c;构建代码&#xff0c;一股…...

JAVA 图形界面编程 AWT篇(1)

前言 为了应对JAVA课设&#xff0c;小编走上了java的图形界面编程的道路&#xff0c;通过博客分享自己的学习历程&#xff0c;并进行笔记的记录。 AWT&#xff08;Abstract Window Toolkit&#xff09;介绍 AWT&#xff08;抽象窗口工具包&#xff09;是 Java 最早的图形用户界…...

C语言 字符串输入输出函数、scanf(“%[^\n]“,)可输入空格 、fgets删除换行符

字符串输入函数&#xff1a; scanf&#xff08;"%s"&#xff0c;数组名&#xff09; gets&#xff08;数组名&#xff09; fgets&#xff08;&#xff09; --- 文件流输入函数 函数原型&#xff1a; int scanf( const char *format, ...…...

【蓝桥杯每日一题】推导部分和——带权并查集

推导部分和 2024-12-11 蓝桥杯每日一题 推导部分和 带权并查集 题目大意 对于一个长度为 ( N ) 的整数数列 A 1 , A 2 , ⋯ , A N A_1, A_2, \cdots, A_N A1​,A2​,⋯,AN​ &#xff0c;小蓝想知道下标 ( l ) 到 ( r ) 的部分和 ∑ i l r A i A l A l 1 ⋯ A r \sum_{…...

Linux 磁盘满了怎么办?快速排查和清理方法

当 Linux 磁盘满了&#xff0c;会导致系统无法正常运行&#xff0c;比如无法写入文件、服务停止、甚至系统崩溃。因此&#xff0c;快速排查并清理磁盘空间是非常重要的。以下是详细的排查和解决步骤&#xff1a; 一、快速定位磁盘占用原因 1. 检查磁盘使用情况 使用 df 命令查…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...