針對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.pswp.cn/news/697809.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/697809.shtml
英文地址,請注明出處:http://en.pswp.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…