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

解决createRoot is not a function

报错:

出现的原因:在于把react18使用的vite构建,在开发中因react版本太高与其他库不兼容,而在降级的时候,出现以上dom渲染出现报错。

解决:将 src/index.j文件改成如下

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

注意在降级修改package.json时候需要注意react、react-dom的版本一致;然后重新 npm install 即可。以下给出package.json文件:

{"name": "hello-react","version": "0.1.0","private": true,"dependencies": {"@testing-library/jest-dom": "^5.17.0","@testing-library/react": "^13.4.0","@testing-library/user-event": "^13.5.0","react": "^16.14.0","react-dom": "^16.14.0","react-scripts": "5.0.1","web-vitals": "^2.1.4"},"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},"browserslist": {"production": [">0.2%","not dead","not op_mini all"],"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"]}
}

 

相关文章:

解决createRoot is not a function

报错&#xff1a; 出现的原因&#xff1a;在于把react18使用的vite构建&#xff0c;在开发中因react版本太高与其他库不兼容&#xff0c;而在降级的时候&#xff0c;出现以上dom渲染出现报错。 解决&#xff1a;将 src/index.j文件改成如下 import React from react; import…...

【Windows 常用工具系列 6 -- CSDN字体格式(字体、颜色、大小)、背景色设置】

文章目录 背景字体大小设置字体颜色设置字体类型背景色 背景 Markdown是一种轻量级标记语言&#xff0c;它的目标是实现“易读易写”。创立于2004年&#xff0c;由约翰格鲁伯&#xff08;John Gruber&#xff09;和亚伦斯沃茨&#xff08;Aaron Swartz&#xff09;共同设计。 …...

带着问题学习分布式系统

写在前面 听过很多道理&#xff0c;却依然过不好这一生。 看过很多关于学习的技巧、方法&#xff0c;却没应用到自己的学习中。 随着年纪变大&#xff0c;记忆力越来越差&#xff0c;整块的时间也越来越少&#xff0c;于是&#xff0c;越来越希望能够更高效的学习。学习是一种习…...

element vue2 动态添加 select+tree

难点在 1 添加一组一组的渲染 是往数组里push对象 循环的&#xff1b;但是要注意对象的结构! 因为这涉及到编辑完成后&#xff0c;表单提交时候的 校验&#xff01; 是校验每一个select tree里边 是否勾选 2 是在后期做编辑回显的时候 保证后端返回的值 是渲染到 select中的tr…...

MySQL Linux自建环境备份至远端服务器自定义保留天数

环境准备 linux下安装mysql请看 Linux环境安装单节点mysql8.0.16 系统版本: CentOS 7 软件版本: mysql8.0.16 备份策略与实现方法 此次备份依赖mysql自带命令mysqldump与linux下crontab命令(定时任务) mysqldump mysqldump客户实用程序执行 逻辑备份,产生一组能够被执行…...

2023下半年软考改成机考,对考生有哪些影响?

软考改革成无纸化考试已经实锤。根据陕西软考办官网的消息&#xff0c;从2023年11月起&#xff0c;软考的所有科目都将改为机器考试形式。详情请参阅&#xff1a; 那么软考考试改为机考后&#xff0c;对我们会有哪些影响呢&#xff1f;我来简单概括一下。 1、复习的方法可以根…...

MySQL存储结构及索引

文章目录 MySQL结构1.2存储引擎介绍1.3存储引擎特点InnoDB逻辑存储结构 MyISAMMemory区别及特点存储引擎选择 索引索引概述索引结构BTreeHash索引分类聚集索引&二级索引索引语法SQL性能分析索引优化最左前缀法则范围查询字符串不加引号模糊查询or连接条件数据分布影响覆盖索…...

2023 RISC-V中国峰会 安全相关议题汇总

目录 1、The practical use cases of the RISC-V IOPMP 2、构建安全可信、稳定可靠的RISC-V安全体系 3、Enhancing RISC-V Debug Security with hardware-based isolation 4、Closing a side door: Designing high-performance RISC-V core resilient to branch prediction…...

要过软考,务必先搞清楚这3点

前段时间软考成绩出来了&#xff0c;大家都过了没&#xff1f; 我看好多人都说早上的题目稳过&#xff0c;下午的好多都挂了。 软考每年这个通过率&#xff0c;确实是一言难尽。 到底怎么样才能过&#xff0c;自学、培训&#xff0c;各种诀窍&#xff0c;五花八门。 但考不过…...

windows常用shell命令大全

简介 基于鼠标操作的后果就是OS界面外观发生改变&#xff0c; 就得多花学习成本。更主要的是基于界面引导Path与命令行直达速度是难以比拟的。另外Geek很大一部分是键盘控&#xff0c;而非鼠标流的。 整理Windows的常用Shell命令&#xff0c;一方面帮助深入学习Mysql&#xf…...

skywalking忽略调用链路中的指定异常

文章目录 一、介绍二、演示项目介绍1. 支付服务2. 订单服务 三、项目演示1. 未忽略异常2. 忽略异常修改配置使用注解 四、结论 往期内容 一、skywalking安装教程 二、skywalking全链路追踪 三、skywalking日志收集 一、介绍 在前面介绍在微服务项目中使用skywalking进行全链…...

学习笔记|printf函数的实现|不同操作系统中的换行|数的进制:2进制、10进制、16进制转换|STC32G单片机视频开发教程(冲哥)|第五集:C语言基础

文章目录 1.C语言 printf函数的实现Tips&#xff1a;ASCII码表Tips&#xff1a;找不到头文件怎么办&#xff1f;主函数添加程序:常规用法:Tips&#xff1a;不同操作系统中的换行 ⒉数的进制:2进制、10进制、16进制.常见的对应&#xff1a;应用&#xff1a;整体端口的操作 3.C语…...

线性代数复习公式整理(自用/持续更新)

第一章 行列式 设A、B为n阶矩阵 ∣ A T ∣ ∣ A ∣ \left | A^T \right | \left | A \right | ​AT ​∣A∣ ∣ A m ∣ ∣ A ∣ m \left | A^m \right | \left | A \right | ^m ∣Am∣∣A∣m ∣ k A ∣ k n ∣ A ∣ \left | kA \right | k^n\left | A \right | ∣kA∣kn∣A…...

QEMU源码全解析34 —— Machine(4)

接前一篇文章&#xff1a;QEMU源码全解析33 —— Machine&#xff08;3&#xff09; 本文内容参考&#xff1a; 《趣谈Linux操作系统》 —— 刘超&#xff0c;极客时间 《QEMU/KVM》源码解析与应用 —— 李强&#xff0c;机械工业出版社 特此致谢&#xff01; 上一回围绕DEF…...

引用Boost库 CMakeList的写法

引用Boost库 CMakeList的写法 flyfish 环境arm cmake_minimum_required(VERSION 3.5)project(example LANGUAGES CXX)set(CMAKE_CXX_STANDARD 11) set(CMAKE_CXX_STANDARD_REQUIRED ON)set(BOOST_PREFIX /media/Boost/build/out/arm64-v8a/) set(BOOST_INCLUDE_DIR "${…...

Kibana 可视化数据分析以及es常用的数据分析函数

一、Kibana 可视化数据分析 1、Discover 的使用及生成报表&#xff1a;https://elasticstack.blog.csdn.net/article/details/131119502 2、Dashboard的使用&#xff1a;https://elasticstack.blog.csdn.net/article/details/131121890 该文档主要介绍Dashboard中的Lens使用…...

golang云原生怎么学?

学习golang云原生有哪些好处&#xff0c;他们的优缺点又有哪些&#xff1f; 一.好处有哪些&#xff1f; 1.高效性能&#xff1a;Golang是一门编译型语言&#xff0c;具有卓越的执行效率和并发处理能力。在云原生环境中&#xff0c;高效的性能对于应对大规模和高负载的分布式系…...

Jenkins+Nginx+vue

安装nodejs 在这里插入图片描述 echo off xcopy C:\ProgramData\Jenkins\.jenkins\workspace\super_manage_vue\dist F:\java\www\super_manage_vue\ /s /e /y echo 复制文件完成 exit安装niginx 配置文件如下 #user nobody; worker_processes 1;#error_log logs/error.lo…...

【vue 监听页面滑动到底部】

监听页面滑动到底部 IntersectionObserverscroll 事件监听器 IntersectionObserver 在 Vue 中监听触底可以通过使用IntersectionObserver实现。IntersectionObserver是一个可以异步观察目标元素与其祖先或视窗交叉状态的API。当目标元素进入或退出视口时&#xff0c;会触发Int…...

(一)创建型设计模式:2、单例模式(C++实现实例 线程安全)

目录 1、单例模式&#xff08;Singleton Pattern&#xff09;的含义 2、单例模式的优缺点 &#xff08;1&#xff09;优点&#xff1a; &#xff08;2&#xff09;缺点&#xff1a; 3、C实现单例模式的示例&#xff08;简单&#xff09; 4、C实现单例模式的示例&#xff…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

关于nvm与node.js

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

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...