针对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"]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/697809.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Zookeeper选举Leader源码剖析

Zookeeper选举Leader源码剖析 leader选举流程 参数说明 myid: 节点的唯一标识&#xff0c;手动设置zxid: 当前节点中最大(新)的事务idepoch-logic-clock: 同一轮投票过程中的逻辑时钟值相同&#xff0c;每投完一次值会增加 leader选举流程 默认投票给自己&#xff0c;优先选择…

vue3 vuex

目录 Vuex 是什么 什么是“状态管理模式”&#xff1f; 什么情况下我应该使用 Vuex&#xff1f; 使用方法&#xff1a; 提交载荷&#xff08;Payload&#xff09; 对象风格的提交方式 使用常量替代 Mutation 事件类型 Mutation 必须是同步函数 在组件中提交 Mutation …

redis GEO 类型原理及命令详解

目录 前言 一、GeoHash 的编码方法 二、Redis 操作GEO类型 前言 我们有一个需求是用户搜索附近的店铺&#xff0c;就是所谓的位置信息服务&#xff08;Location-Based Service&#xff0c;LBS&#xff09;的应用。这样的相关服务我们每天都在接触&#xff0c;用滴滴打车&am…

使用ENV工具编译RT-Thread【详细过程讲解:从下载到编译、设置】

感兴趣的宝子&#xff0c;可以点个赞收藏&#xff0c;便于后期有需要的时候能快速找到~~ ENV编译编译RT-Thread工程的详细过程讲解 ENV简介ENV的下载设置ENV使用ENV编译RT-Thread工程◆ 打开ENV◆ 输入打包命令◆ 查看并打开工程文件◆ 使用menuconfig 对生成项目的RT-Thread配…

【Git企业实战开发】Git常用开发流操作总结

【Git企业实战开发】Git常用开发流操作总结 大家好 我是寸铁&#x1f44a; 总结了一篇Git常用开发流操作总结的文章✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 现在刚做项目的伙伴&#xff0c;可能你之前学过git&#xff0c;但是一实战发现不熟悉 没关系&#xff0c;看寸铁这篇…

fastadmin引用 redis 方法2

页面上引用 use \think\cache\driver\Redis; $redis new Redis();$redis->set(key, value);// 获取键值对的值$value $redis->get(key);echo $value;如果执行后出现 不支持redis&#xff0c; 检查系统是否开启 redis 扩展。 如果是小皮系统。 项目-管理-php扩展&#x…

js实现顶部导航栏随着滚动条下滑显示背景颜色,上划到顶部背景颜色消失

有个项目需求&#xff0c;如题目所示。这种展示方式让首页的内容可以完美展示而不受到导航栏的干扰&#xff0c;等下滑查看内容时导航栏的背景颜色再显示出来。下面是一个案例&#xff1a; 导航栏随滑动条下滑显示 再下面是我的成果视频展示&#xff1a; 导航条随滚动条下滑显示…

vue怎么实现pdf、excel、word文件离线预览?2024年2月份最新测试(可行方案和详细代码在文章末尾)

Vue.js 中实现Office文档(Word、Excel、PPT)和PDF文件的预览,通常会借助于第三方库或服务。 1. Office文档在线预览 使用WPS Web Office SDK WPS提供了Web Office服务,可以将文档转换为网页格式进行在线预览。首先在项目中引入并注册WPS提供的SDK,然后在Vue组件中配置一个…

一、平滑发布与灰度发布

目录 一、平滑发布与灰度发布 一、平滑发布与灰度发布 什么叫平滑&#xff1a;在发布的过程中不影响用户的使用&#xff0c;系统不会因发布而暂停对外服务&#xff0c;不会造成用户短暂性无法访问&#xff1b; 什么叫灰度&#xff1a;发布后让部分用户使用新版本&#xff0c;…

【Linux】普通用户sudo失败怎么办

普通用户&#xff0c;sudo失败报错怎么办 问题分析如何解决成功 问题分析 新建的普通用户sudo失败 sudo提权&#xff0c;是以root的身份执行命令。 当我们用sudo提升权限的时候&#xff0c;这里有个问题&#xff0c;Linux会提示我们输入当前普通用户的密码——这就有点不好。…

【Linux取经路】基础I/O之重定向的实现原理

文章目录 一、再来理解重定向1.1 输出重定向效果演示1.2 重定向的原理1.3 dup21.4 输入重定向效果演示1.5 输入重定向代码实现 二、再来理解标准输出和标准错误2.1 同时对标准输出和标准错误进行重定向2.2 将标准输出和标准错误重定向到同一个文件 三、再看一切皆文件四、结语 …

Elasticsearch从入门到精通-01认识Elasticsearch

Elasticsearch从入门到精通-01认识Elasticsearch &#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是程序员行走的鱼 &#x1f342;博主从本篇正式开始ES学习&#xff0c;希望小伙伴可以一起探讨 &#x1f4d6; 本篇主要介绍和大家一块简单认识下ES并了解ES中的主要角色…

游戏身份证实名认证接口-C#语言代码示例

为助力解决网络游戏中的未成年人过度沉迷、不规范行为以及个人信息安全等问题&#xff0c;翔云API提供了高效、安全的游戏身份证实名认证接口。该接口的目标是通过核验身份证三要素的方式实现用户身份的准确验证&#xff0c;确保玩家真实身份与游戏账号对应&#xff0c;并有效执…

顺序表增删改查(c语言)

main函数&#xff1a; #include <stdio.h>#include "./seq.h"int main(int argc, const char *argv[]){SeqList* list create_seqList();insert_seqList(list,10);insert_seqList(list,100);insert_seqList(list,12);insert_seqList(list,23);show_seqList(l…

SpringBoot集成Mqtt发送消息

1. MQTT简介 MQTT是一种物联网消息协议&#xff0c;为Message Queuing Telemetry Transport的缩写&#xff0c;即消息队列传输探测&#xff0c;协议基于发布订阅模式进行通信&#xff0c;有开销低、带宽小、轻量的特点&#xff0c;通常应用在物联网数据采集、移动应用、智能硬…

H5获取手机相机或相册图片两种方式-Android通过webview传递多张照片给H5

需求目的&#xff1a; 手机机通过webView展示H5网页&#xff0c;在特殊场景下&#xff0c;需要使用相机拍照或者从相册获取照片&#xff0c;上传后台。 完整流程效果&#xff1a; 如下图 一、H5界面样例代码 使用html文件格式&#xff0c;文件直接打开就可以展示布局&#…

BGP-OSPF防环机制

一、BGP 防环机制 1、AS内部防环&#xff1a;通过IBGP水平分割&#xff0c;IBGP水平分割的基本思想是 不把从IBGP邻居学到的路由信息发送给其他IBGP邻居&#xff1b; 2、AS间的防环&#xff1a;通过属性AS-PATH来实现&#xff0c; 基本思想是&#xff1a;记录经过的路径&…

【每日一题】2583. 二叉树中的第 K 大层和-2024.2.23

题目: 2583. 二叉树中的第 K 大层和 给你一棵二叉树的根节点 root 和一个正整数 k 。 树中的 层和 是指 同一层 上节点值的总和。 返回树中第 k 大的层和(不一定不同)。如果树少于 k 层,则返回 -1 。 注意,如果两个节点与根节点的距离相同,则认为它们在同一层。 示…

canvas水波纹效果,jquery鼠标水波纹插件

canvas水波纹效果&#xff0c;jquery鼠标水波纹插件 效果展示 jQuery水波纹效果&#xff0c;canvas水波纹插件 HTML代码片段 <div class"scroll04wrap"><h3>发展历程</h3><div class"scroll04"><p>不要回头&#xff0c;一…

前端工程Bem架构及其封装

文章目录 简介语法在vue3项目中引用sass创建bem.scss文件修改vite.config.tsvue文件中使用结果 这是我学习记录的笔记&#xff0c;如有不正&#xff0c;欢迎补充 简介 首先认识一下什么是bem架构&#xff1f;BEM的意思就是块&#xff08;block&#xff09;、元素&#xff08;e…