针对Umi、React中遇到的 “xxxx”不能用作 JSX 组件 问题解决方案
一、处理方案
- 这是因为"@types/react"、"@types/react-dom"在子依赖中使用的版本不一致导致,一般情况npm会自动帮我们处理版本不一致的问题。如果npm处理不了,就需要我们自己手动处理
- 在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"}, } - 在package.json中的scripts中添加一行命令
{"scripts":{"preinstall": "npx force-resolutions"} } - 配置完成之后要执行一次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"在子依赖中使用的版本不一致导致,一般情况npm会自动帮我们处理版本不一致的问题。如果npm处理不了,就需要我们自己手动处理在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…...
设计模式(十) - 工厂方式模式
前言 在此前的设计模式(四)简单工厂模式中我们介绍了简单工厂模式,在这篇文章中我们来介绍下工厂方法模式,它同样是创建型设计模式,而且又有些类似,文章的末尾会介绍他们之间的不同。 1.工厂方法模式简介 …...
http协议基础与Apache的简单介绍
一、相关介绍: 互联网:是网络的网络,是所有类型网络的母集因特网:世界上最大的互联网网络。即因特网概念从属于互联网概念。习惯上,大家把连接在因特网上的计算机都成为主机。万维网:WWW(world…...
RabbitMQ的死信队列和延迟队列
文章目录 死信队列如何配置死信队列死信队列的应用场景Spring Boot实现RabbitMQ的死信队列 延迟队列方案优劣:延迟队列的实现有两种方式: 死信队列 1)“死信”是RabbitMQ中的一种消息机制。 2)消息变成死信,可能是由于…...
PyQt 逻辑与界面分离
将逻辑与界面分离是一种良好的软件设计实践,可以提高代码的可维护性和可扩展性。在使用 pyuic 工具转换 Qt Designer 的 .ui 文件时,你可以通过以下方式实现逻辑与界面的分离: 创建一个单独的 Python 模块,用于编写主窗口的逻辑代…...
opengl播放3d pose 原地舞蹈脚来回飘动
目录 opengl播放3d pose 原地舞蹈脚来回飘动 设置相机视角 opengl播放3d pose 原地舞蹈脚来回飘动 opengl播放3d pose 原地舞蹈时,脚来回飘动,正常状态是脚应该不动的。 经过反复分析实验验证,找到原因是,渲染计算3d坐标时,都要减去一个offset,这个offset是髋关节的坐…...
Linux环境基础开发工具使用篇(三) git 与 gdb
一、版本控制器-git 1.简单理解: ①git既是服务端,又是客户端 ②git会记录版本的变化 ③git是一个去中心化的分布式软件 git/gitee 是基于git仓库搭建的网站,让版本管理可视化 2.git 三板斧提交代码 查看安装的git版本 git--version 命令行提交代…...
mybatis---->tx中weekend类
🙌首先weekend可不是mybatis中的类呦~~🙌 它是来自于mybatis的一个扩展库! 如果你要在springboot中使用,需要引入以下依赖~~ <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,安装的都是最新版odoo wget -O - https://nightly.odoo.com/odoo.key | apt-key add - echo "deb http://nightly.odoo.com/17.0/n…...
conda常用命令详解
Conda 是一个功能强大的包管理器和环境管理器,用于安装、部署和管理软件包和其依赖关系。下面是一些常用的 Conda 命令及其详细解释: 创建环境: conda create --name myenv python3.8可以指定创建环境的目录conda create --prefix /path/to/d…...
Java面试——锁
公平锁: 是指多个线程按照申请锁的顺序来获取锁,有点先来后到的意思。在并发环境中,每个线程在获取锁时会先查看此锁维护的队列,如果为空,或者当前线程是等待队列的第一个,就占有锁,否则就会…...
Spring Boot与Netty:构建高性能的网络应用
点击下载《Spring Boot与Netty:构建高性能的网络应用》 1. 前言 本文将详细探讨如何在Spring Boot应用中集成Netty,以构建高性能的网络应用。我们将首先了解Netty的原理和优势,然后介绍如何在Spring Boot项目中集成Netty,包括详…...
ARMv8-AArch64 的异常处理模型详解之异常处理详解(同步异常和异步异常的分析和处理)
这里写目录标题 一,同步异常的分析1.1 同步异常分析-异常链接寄存器ELR1.2 同步异常分析-异常综合寄存器ESR,Exception Syndrome Register1.3 同步异常分析-错误地址寄存器FAR,Fault Address Register 二, 同步异常的处理示例 Synchronous ex…...
Elasticsearch:基于 Langchain 的 Elasticsearch Agent 对文档的搜索
在今天的文章中,我们将重点介绍如何使用 LangChain 提供的基础设施在 Python 中构建 Elasticsearch agent。 该 agent 应允许用户以自然语言询问有关 Elasticsearch 集群中数据的问题。 Elasticsearch 是一个强大的搜索引擎,支持词法和向量搜索。 Elast…...
学习python的第7天,她不再开放她的听歌榜单
我下午登录上小号,打开聊天消息看到了她的回复,我很开心兴奋,可是她不再开放她的听歌榜单了,我感觉得到,我要失恋了。 “因为当年电视上看没有王菲版本的” “行”。 “那你以后还会开放听歌榜单吗?”我…...
多维时序 | Matlab实现CPO-BiTCN-BiGRU冠豪猪优化时间卷积神经网络双向门控循环单元多变量时间序列预测模型
多维时序 | Matlab实现CPO-BiTCN-BiGRU冠豪猪优化时间卷积神经网络双向门控循环单元多变量时间序列预测模型 目录 多维时序 | Matlab实现CPO-BiTCN-BiGRU冠豪猪优化时间卷积神经网络双向门控循环单元多变量时间序列预测模型预测效果基本介绍程序设计参考资料 预测效果 基本介绍…...
低代码与大语言模型的探索实践
低代码系列文章: 可视化拖拽组件库一些技术要点原理分析可视化拖拽组件库一些技术要点原理分析(二)可视化拖拽组件库一些技术要点原理分析(三)可视化拖拽组件库一些技术要点原理分析(四)低代码…...
element导航菜单el-menu添加搜索功能
element导航菜单-侧栏,自带的功能没有搜索或者模糊查询。 找了找资料 找到一个比较可行的,记录一下: //index.vue的代码 <div style"overflow:auto"><el-menu :default-active"$route.path":default-openeds&…...
从一次vSAN报警深入:图解vSAN对象状态机,帮你彻底看懂‘正常’、‘降级’与‘不可访问’
深入解析vSAN对象状态机:从报警诊断到运维实战 那天凌晨三点,值班手机突然响起刺耳的警报声。监控系统显示某金融客户的核心交易集群出现"未知对象类型不可访问"的vSAN报警。作为经历过多次vSAN故障的老兵,我深知这种报警背后可能隐…...
Python 内存泄漏排查:生产环境定位、分析、解决全攻略(完整版・含大量实战代码)
本文结构严格对标 CSDN 技术博客格式,包含:内存泄漏原理 → 生产监控 → 工具实战 → 8 类真实泄漏场景代码复现 → 定位代码 → 修复代码 → 线上最佳实践。可直接发布技术博客。一、引言:为什么 Python 内存泄漏是生产环境的致命隐患在后端…...
深度解析:IDE Eval Resetter 的技术实现与架构设计
深度解析:IDE Eval Resetter 的技术实现与架构设计 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter IDE Eval Resetter 是一款针对 JetBrains 系列 IDE 试用期管理的高级工具,通过精密的系统…...
如何通过5种实用方法将数据从华为传输到OnePlus
作为冉冉升起的Android手机品牌,一加如今已成为最具性价比的手机品牌之一,并迅速占据了一定的市场份额。如果您曾经是华为的忠实粉丝,但现在入手了一加 13 或即将推出的一加 15,那么您就需要将数据从华为迁移到一加。这就是您来这…...
向量搜索不是加个Vector列就完事!EF Core 10六大易错点曝光,87%开发者在生产环境踩过坑
第一章:Entity Framework Core 10 向量搜索扩展 面试题汇总核心能力与适用场景 Entity Framework Core 10 原生不支持向量搜索,但通过官方预览包 Microsoft.EntityFrameworkCore.Vector(随 EF Core 10.0.0-preview7 引入)可集成 P…...
Revo Uninstaller:彻底解决软件卸载不干净与顽固程序残留的实用教程
你是否遇到过这样的情况:从控制面板卸载一个软件后,安装目录依然存在,手动删除时提示“文件正在使用”;打开注册表编辑器,搜索软件名称,发现成百上千条残留项;或者某个软件明明已经“卸载”&…...
Blazor Server现代化改造指南(2026生产环境零故障部署手册)
第一章:Blazor Server现代化改造的演进逻辑与2026生产级定位Blazor Server 正从“实时交互原型平台”加速演进为支撑高并发、强合规、可观测企业级应用的核心运行时。这一转变并非简单功能叠加,而是由.NET 8/9 的信号量优化、WebSocket 协议栈重构、以及…...
别再搞混了!OpenLayers中Feature与Layer的交互指南(附封装函数)
OpenLayers要素与图层交互实战:从原理到封装 当我们第一次在OpenLayers中创建地图应用时,最令人困惑的莫过于要素(Feature)、图层(Layer)和数据源(Source)这三者之间的关系。很多开发者都曾遇到过这样的场景:点击地图上的某个要素想要获取其所…...
2026届毕业生推荐的降AI率方案推荐
Ai论文网站排名(开题报告、文献综述、降aigc率、降重综合对比) TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 想要降低AI生成内容的比率,就得从多个维度去优化文本。其一,要调整句…...
Beyond Compare 5授权密钥生成器:3种方法轻松解决评估期过期问题
Beyond Compare 5授权密钥生成器:3种方法轻松解决评估期过期问题 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen Beyond Compare 5作为一款功能强大的文件对比工具,在30天…...
