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

针对Umi、React中遇到的 “xxxx”不能用作 JSX 组件 问题解决方案

一、处理方案

  1. 这是因为"@types/react"、"@types/react-dom"在子依赖中使用的版本不一致导致,一般情况npm会自动帮我们处理版本不一致的问题。如果npm处理不了,就需要我们自己手动处理
  2. 在package.json中添加一项配置
    {name:"test",version:"1.0.0",...,"devDependencies": {"@types/react": "17.0.0","@types/react-dom": "17.0.0"},"resolutions": {"@types/react": "17.0.0","@types/react-dom": "17.0.0"},
    }
  3. 在package.json中的scripts中添加一行命令
    {"scripts":{"preinstall": "npx force-resolutions"}
    }
  4. 配置完成之后要执行一次preinstall命令:npm run preinstall 。如果执行命令后还是会有报错,执行 npm i 安装全部依赖,再次执行 npm run preinstall

二、原因

以下内容引用自:package.json中的resolutions作用_package.json resolutions-CSDN博客

resolutions 是一个用于解决依赖项冲突的 npm 特殊字段。在某些情况下,您的项目依赖项可能需要不同的版本,而这些版本之间可能存在冲突。这时候,您可以使用 resolutions 字段来指定应该使用哪个版本,以解决这些冲突。

例如,如果您的项目依赖于 package-a 和 package-b,而这两个包都依赖于 package-c,但它们依赖于 package-c 的不同版本,这会导致冲突。在这种情况下,您可以在 package.json 文件中使用 resolutions 字段来指定应该使用哪个版本。例如:

{"dependencies": {"package-a": "^1.0.0","package-b": "^2.0.0"},"resolutions": {"package-c": "^1.2.0"}
}

在这个示例中,我们指定了 package-c 的版本应该是 ^1.2.0。这意味着当 npm 安装依赖项时,它将使用 1.2.x 系列中的最新版本来解决 package-a 和 package-b 之间的冲突。

需要注意的是,resolutions 字段只在您的项目依赖项中出现冲突时才需要使用。在大多数情况下,npm 可以自动解决依赖项之间的冲突,而无需使用 resolutions 字段。

当某些安全扫描工具(例如fossa)扫描出项目依赖的子依赖版本需要升级的情况,也可以尝试使用此方法来解决。

在package.json文件里添加跟scripts、dependencies、evDependencies平级的resolutions,把想要强制升级的子依赖期望版本写入,scripts里添加配置"preinstall": "npx force-resolutions",最后像启动项目一样使用npm run preinstall运行下载,最后达成目的。

{"name": "xxx","version": "1.0.0","description": "xxx","author": "xxx","private": true,"scripts": {"dev": "webpack-dev-server --inline --hot --progress --config build/webpack.dev.conf.js","start": "npm run dev","unit": "jest --config test/unit/jest.conf.js --coverage","e2e": "node test/e2e/runner.js","test": "npm run unit && npm run e2e","build": "node build/build.js","preinstall": "npx force-resolutions"},"dependencies": {"@types/echarts": "0.0.13","ajv": "^6.12.6","awe-dnd": "^0.3.4","axios": "^0.26.0","babel-polyfill": "^6.26.0"},"devDependencies": {"vue-template-compiler": "^2.6.11","webpack": "^3.12.0","webpack-bundle-analyzer": "^2.13.1","webpack-merge": "^4.2.2"},"resolutions": {"lodash.template": "4.5.0","eventsource": "1.1.1","ms":"https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"},"engines": {"node": ">= 12.0.0","npm": ">= 3.0.0"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"]
}

相关文章:

针对Umi、React中遇到的 “xxxx”不能用作 JSX 组件 问题解决方案

一、处理方案 这是因为"types/react"、"types/react-dom"在子依赖中使用的版本不一致导致&#xff0c;一般情况npm会自动帮我们处理版本不一致的问题。如果npm处理不了&#xff0c;就需要我们自己手动处理在package.json中添加一项配置 {name:"test&…...

蓝桥杯备战刷题one(自用)

1.被污染的支票 #include <iostream> #include <vector> #include <map> #include <algorithm> using namespace std; int main() {int n;cin>>n;vector<int>L;map<int,int>mp;bool ok0;int num;for(int i1;i<n;i){cin>>nu…...

设计模式(十) - 工厂方式模式

前言 在此前的设计模式&#xff08;四&#xff09;简单工厂模式中我们介绍了简单工厂模式&#xff0c;在这篇文章中我们来介绍下工厂方法模式&#xff0c;它同样是创建型设计模式&#xff0c;而且又有些类似&#xff0c;文章的末尾会介绍他们之间的不同。 1.工厂方法模式简介 …...

http协议基础与Apache的简单介绍

一、相关介绍&#xff1a; 互联网&#xff1a;是网络的网络&#xff0c;是所有类型网络的母集因特网&#xff1a;世界上最大的互联网网络。即因特网概念从属于互联网概念。习惯上&#xff0c;大家把连接在因特网上的计算机都成为主机。万维网&#xff1a;WWW&#xff08;world…...

RabbitMQ的死信队列和延迟队列

文章目录 死信队列如何配置死信队列死信队列的应用场景Spring Boot实现RabbitMQ的死信队列 延迟队列方案优劣&#xff1a;延迟队列的实现有两种方式&#xff1a; 死信队列 1&#xff09;“死信”是RabbitMQ中的一种消息机制。 2&#xff09;消息变成死信&#xff0c;可能是由于…...

PyQt 逻辑与界面分离

将逻辑与界面分离是一种良好的软件设计实践&#xff0c;可以提高代码的可维护性和可扩展性。在使用 pyuic 工具转换 Qt Designer 的 .ui 文件时&#xff0c;你可以通过以下方式实现逻辑与界面的分离&#xff1a; 创建一个单独的 Python 模块&#xff0c;用于编写主窗口的逻辑代…...

opengl播放3d pose 原地舞蹈脚来回飘动

目录 opengl播放3d pose 原地舞蹈脚来回飘动 设置相机视角 opengl播放3d pose 原地舞蹈脚来回飘动 opengl播放3d pose 原地舞蹈时,脚来回飘动,正常状态是脚应该不动的。 经过反复分析实验验证,找到原因是,渲染计算3d坐标时,都要减去一个offset,这个offset是髋关节的坐…...

Linux环境基础开发工具使用篇(三) git 与 gdb

一、版本控制器-git 1.简单理解: ①git既是服务端&#xff0c;又是客户端 ②git会记录版本的变化 ③git是一个去中心化的分布式软件 git/gitee 是基于git仓库搭建的网站&#xff0c;让版本管理可视化 2.git 三板斧提交代码 查看安装的git版本 git--version 命令行提交代…...

mybatis---->tx中weekend类

&#x1f64c;首先weekend可不是mybatis中的类呦~~&#x1f64c; 它是来自于mybatis的一个扩展库&#xff01; 如果你要在springboot中使用&#xff0c;需要引入以下依赖~~ <dependency><groupId>tk.mybatis</groupId><artifactId>mapper-spring-boot…...

Shell echo、printf、test命令

目录 Shell echo命令 打印文本消息 显示变量值 输出特殊字符 输出到文件 追加到文件 Shell printf 命令 打印简单文本 Shell test 命令 文件测试 字符串比较 整数比较 逻辑运算 Shell echo命令 打印文本消息 echo "Hello, World!" 显示变量值 name&q…...

腾讯云主机Ubuntu22.04安装Odoo17

一、安装PostgreSQL16 参见之前的文章 Ubuntu22.04安装PostgreSQL-CSDN博客 二、安装Odoo17 本方案使用的nightly版的odoo&#xff0c;安装的都是最新版odoo wget -O - https://nightly.odoo.com/odoo.key | apt-key add - echo "deb http://nightly.odoo.com/17.0/n…...

conda常用命令详解

Conda 是一个功能强大的包管理器和环境管理器&#xff0c;用于安装、部署和管理软件包和其依赖关系。下面是一些常用的 Conda 命令及其详细解释&#xff1a; 创建环境&#xff1a; conda create --name myenv python3.8可以指定创建环境的目录conda create --prefix /path/to/d…...

Java面试——锁

​ 公平锁&#xff1a; 是指多个线程按照申请锁的顺序来获取锁&#xff0c;有点先来后到的意思。在并发环境中&#xff0c;每个线程在获取锁时会先查看此锁维护的队列&#xff0c;如果为空&#xff0c;或者当前线程是等待队列的第一个&#xff0c;就占有锁&#xff0c;否则就会…...

Spring Boot与Netty:构建高性能的网络应用

点击下载《Spring Boot与Netty&#xff1a;构建高性能的网络应用》 1. 前言 本文将详细探讨如何在Spring Boot应用中集成Netty&#xff0c;以构建高性能的网络应用。我们将首先了解Netty的原理和优势&#xff0c;然后介绍如何在Spring Boot项目中集成Netty&#xff0c;包括详…...

ARMv8-AArch64 的异常处理模型详解之异常处理详解(同步异常和异步异常的分析和处理)

这里写目录标题 一&#xff0c;同步异常的分析1.1 同步异常分析-异常链接寄存器ELR1.2 同步异常分析-异常综合寄存器ESR&#xff0c;Exception Syndrome Register1.3 同步异常分析-错误地址寄存器FAR,Fault Address Register 二&#xff0c; 同步异常的处理示例 Synchronous ex…...

Elasticsearch:基于 Langchain 的 Elasticsearch Agent 对文档的搜索

在今天的文章中&#xff0c;我们将重点介绍如何使用 LangChain 提供的基础设施在 Python 中构建 Elasticsearch agent。 该 agent 应允许用户以自然语言询问有关 Elasticsearch 集群中数据的问题。 Elasticsearch 是一个强大的搜索引擎&#xff0c;支持词法和向量搜索。 Elast…...

学习python的第7天,她不再开放她的听歌榜单

我下午登录上小号&#xff0c;打开聊天消息看到了她的回复&#xff0c;我很开心兴奋&#xff0c;可是她不再开放她的听歌榜单了&#xff0c;我感觉得到&#xff0c;我要失恋了。 “因为当年电视上看没有王菲版本的” “行”。 “那你以后还会开放听歌榜单吗&#xff1f;”我…...

多维时序 | Matlab实现CPO-BiTCN-BiGRU冠豪猪优化时间卷积神经网络双向门控循环单元多变量时间序列预测模型

多维时序 | Matlab实现CPO-BiTCN-BiGRU冠豪猪优化时间卷积神经网络双向门控循环单元多变量时间序列预测模型 目录 多维时序 | Matlab实现CPO-BiTCN-BiGRU冠豪猪优化时间卷积神经网络双向门控循环单元多变量时间序列预测模型预测效果基本介绍程序设计参考资料 预测效果 基本介绍…...

低代码与大语言模型的探索实践

低代码系列文章&#xff1a; 可视化拖拽组件库一些技术要点原理分析可视化拖拽组件库一些技术要点原理分析&#xff08;二&#xff09;可视化拖拽组件库一些技术要点原理分析&#xff08;三&#xff09;可视化拖拽组件库一些技术要点原理分析&#xff08;四&#xff09;低代码…...

element导航菜单el-menu添加搜索功能

element导航菜单-侧栏&#xff0c;自带的功能没有搜索或者模糊查询。 找了找资料 找到一个比较可行的&#xff0c;记录一下&#xff1a; //index.vue的代码 <div style"overflow:auto"><el-menu :default-active"$route.path":default-openeds&…...

Vivado 2023.4 与 ModelSim SE 2022.4 联合仿真环境搭建全攻略(附资源与常见报错解决)

Vivado 2023.4与ModelSim SE 2022.4联合仿真环境搭建实战指南 在FPGA开发领域&#xff0c;仿真环节的重要性不言而喻。作为Xilinx最新推出的设计套件&#xff0c;Vivado 2023.4与Mentor旗下ModelSim SE 2022.4的强强联合&#xff0c;能为开发者提供更高效的验证环境。本文将深入…...

**Vulkan实战进阶:从零构建高性能图形渲染管线(附完整代码流程)**在现代图形编程领域,**Vulkan**

Vulkan实战进阶&#xff1a;从零构建高性能图形渲染管线&#xff08;附完整代码流程&#xff09; 在现代图形编程领域&#xff0c;Vulkan 已成为跨平台、低开销、高性能渲染的首选 API。相比 OpenGL 或 DirectX 12&#xff0c;Vulkan 提供了更细粒度的控制能力&#xff0c;但也…...

从零到一:Open5GS 5G核心网实战搭建与避坑指南(基于Ubuntu 22.04)

从零构建Open5GS 5G核心网&#xff1a;Ubuntu 22.04全流程实战手册 1. 环境准备与系统配置 在Ubuntu 22.04上部署Open5GS 5G核心网需要先搭建稳定的基础环境。建议使用物理服务器或配置不低于4核CPU/8GB内存/100GB存储的云实例&#xff0c;避免资源不足导致组件异常。 关键依赖…...

贾子理论(Kucius Theory):融东方智慧与数理公理的全新认知框架

贾子理论&#xff08;Kucius Theory&#xff09;&#xff1a;融东方智慧与数理公理的全新认知框架摘要贾子理论&#xff08;Kucius Theory&#xff09;由学者贾龙栋于2025‑2026年提出&#xff0c;融合儒道、《周易》、兵法与现代科学、AI及非平衡态热力学&#xff0c;构建“1‑…...

华为防火墙双活链路部署避坑指南:IP-LINK和BFD到底该怎么选?

华为防火墙双活链路部署实战&#xff1a;IP-LINK与BFD技术选型深度解析 当企业网络架构面临双活链路部署时&#xff0c;华为防火墙的链路检测机制选择往往成为关键决策点。作为网络架构师&#xff0c;我们常常需要在IP-LINK和BFD两种主流方案间做出权衡——这不仅关乎网络稳定性…...

告别Office依赖:用Aspose.Words for .NET 22.11.0实现Word文档全流程自动化

企业级文档自动化实战&#xff1a;Aspose.Words for .NET 深度应用指南 在数字化转型浪潮中&#xff0c;企业文档处理正面临前所未有的效率挑战。传统依赖Microsoft Office手工操作的方式&#xff0c;在需要处理数百份合同、报告或发票的场景下显得力不从心。而服务器端自动化文…...

STM32F407 RTC入侵检测实战:用按键模拟入侵事件(附消抖技巧)

STM32F407 RTC入侵检测实战&#xff1a;用按键模拟入侵事件&#xff08;附消抖技巧&#xff09; 在嵌入式系统开发中&#xff0c;实时时钟&#xff08;RTC&#xff09;模块的安全功能往往被忽视&#xff0c;而入侵检测恰恰是保护关键数据免遭篡改的最后一道防线。本文将带您深入…...

AndroidPdfViewer打印功能完整指南:3步实现PDF文档打印

AndroidPdfViewer打印功能完整指南&#xff1a;3步实现PDF文档打印 【免费下载链接】AndroidPdfViewer Android view for displaying PDFs rendered with PdfiumAndroid 项目地址: https://gitcode.com/gh_mirrors/an/AndroidPdfViewer 想要为你的Android应用添加PDF打印…...

工业现场Docker容器启动失败率骤降83.6%:27个被忽略的udev规则、cgroup v2与RT kernel协同配置

第一章&#xff1a;工业现场Docker容器启动失败率骤降83.6%的全局洞察在某大型智能制造基地的边缘计算节点集群中&#xff0c;Docker容器平均启动失败率曾长期维持在12.4%&#xff0c;导致PLC数据采集中断、OPC UA网关服务延迟及实时告警丢失。通过系统性根因分析发现&#xff…...

GPU云定价新模型:特征定价(FBP)的经济学设计与实践

1. GPU云定价困境&#xff1a;当摩尔定律不再均衡现代GPU架构正在经历一场静默的经济危机。过去五十年间&#xff0c;摩尔定律不仅预测了处理器性能的指数级增长&#xff0c;也保证了每美元能买到的计算能力持续提升。但在今天的GPU领域&#xff0c;这个经济规律出现了戏剧性的…...