react打包發到線上報錯Minified React error #130

開發過程中遇到一個問題,記錄一下
本地打包發布正常,發測試環境正常,可是通過Jenkins打包發布線上報錯

報錯信息

index-67fbbd81.js:39 Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
打開報錯信息發現報錯
在這里插入圖片描述
由于這次更新內容比較多,開始懷疑是不是本地代碼問題,
組件undefined一般是引入導出組件名問題。讓cursor檢查了一遍代碼,發現代碼沒有問題。
又從git上重新拉取代碼,下載依賴,運行,也是沒問題。
本地生產環境沒問題,線上報錯,說明問題很可能出在環境差異上。
對比了一下Jenkins上的node版本,react版本等,發現版本號一致。
猜想可能是使用本地包的問題,在服務器上單獨下載了依賴,導致線上本地依賴包不一致。
原本的Jenkins打包命令

yarn install
yarn build

yarn install 不是嚴格模式,可能會根據 semver 自動升級依賴,導致和本地 node_modules 不一致。
如果 Jenkins 的 node_modules 目錄有殘留,可能會混入舊依賴,導致打包產物和本地不一樣。
更改后的Jenkins命令

rm -rf node_modules
yarn cache clean
yarn install --frozen-lockfile
yarn build

rm -rf node_modules:徹底清理依賴,避免殘留
yarn cache clean:清理 yarn 緩存
yarn install --frozen-lockfile:嚴格按照 yarn.lock 安裝依賴,保證和本地一模一樣
yarn build:正常打包
這樣可以100% 保證 Jenkins 構建出來的依賴和本地完全一致,不會因為依賴包差異導致線上 undefined 或 React #130 錯誤。
很多線上“本地沒問題,線上報錯”的根因,都是因為 CI/CD 沒有嚴格依賴鎖定
接下來重新用用Jenkins打包----正常-----線上-----正常!
完美解決!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/88412.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/88412.shtml
英文地址,請注明出處:http://en.pswp.cn/web/88412.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

微服務項目遠程調用時的負載均衡是如何實現的?

負載均衡概述 負載均衡是微服務架構中的核心組件,用于將請求合理分配到多個服務實例上,提高系統的可用性和性能。負載均衡的分類 負載均衡大致可以分為兩類 1. 服務端負載均衡 實現位置:獨立部署的負載均衡服務器(位于客戶端和服務…

【中文核心期刊推薦】中國農業科技導報

《中國農業科技導報》是中國科技核心期刊,也是北京大學圖書館“中文核心期刊要目總覽”收錄的期刊。它是由中國農村技術開發中心主辦,全面為科教興農服務的綜合性農業學術期刊。《中國農業科技導報》是中國農業科學院生物技術研究所承辦的&a…

php 如何通過mysqli操作數據庫?

在PHP中,mysqli(MySQL Improved Extension)是操作MySQL數據庫的擴展庫,提供了面向對象和過程式兩種風格。以下是mysqli的基本操作方法: 1. 連接數據庫 面向對象風格 $mysqli new mysqli(localhost, username, passwor…

c/c++拷貝函數

memcpy()函數概要原型void * memcpy ( void * dest, const void * src, size_t num );功能memcpy()會復制 src 所指的內存內容的前 num 個字節到 dest所指的內存地址上(memcpy()并不關心被復制的數據類型,只是逐字節地進行復制,這給函數的使用…

HTTP核心基礎詳解(附實戰要點)

目錄 一圖勝千言:HTTP核心機制圖解?編輯 一、HTTP本質:通信的橋梁 二、五大核心特性解析 三、HTTP頭部:隱藏的控制中心 四、連接管理:性能關鍵點 開發者必知實踐技巧 一圖勝千言:HTTP核心機制圖解 一、HTTP本質…

華為靜態路由配置

問題描述:針對兩臺筆記本和兩個路由器在不同的網段場景中,對兩個路由器進行靜態路由配置。下面以如下場景為例,介紹詳細配置過程。配置步驟: 1、對每個路由器的接口下配置IP地址 [huawei]interface gx/x/x [huawei-interface]ip a…

閑庭信步使用圖像驗證平臺加速FPGA的開發:第八課——圖像數據的行緩存

(本系列只需要modelsim即可完成數字圖像的處理,每個工程都搭建了全自動化的仿真環境,只需要雙擊文件就可以完成整個的仿真,大大降低了初學者的門檻!!!!如需要該系列的工程文件請關注…

經典排序算法

文章目錄前言1. 排序的基本概念1.1 排序是什么?1.2 常見的排序算法概覽2. 常見排序算法的實現2.1 插入排序 (Insertion Sort)2.1.1 基本思想2.1.2 直接插入排序2.1.3 希爾排序 (Shell Sort)2.2 選擇排序 (Selection Sort)2.2.1 直接選擇排序2.2.2 堆排序 (Heap Sort…

RabbitMQ 消息隊列:從入門到Spring Boot實戰

RabbitMQ 作為一款開源的、基于 AMQP(Advanced Message Queuing Protocol)協議實現的消息代理,憑借其強大的功能、靈活的路由機制以及出色的性能,在業界得到了廣泛的應用。無論是處理高并發訂單、異步通知、日志收集還是系統解耦&…

代賬行業數字化破局:從“知道”到“做到”,三步走穩贏!

認知!降本!增收!數字化!——這不僅是口號,更是代賬行業在激烈競爭和時代變化中生存發展的關鍵。很多代賬同行其實都明白趨勢,也知道大概該怎么做。但問題卡在第一步:不知道怎么開始,…

Mac 電腦crontab執行定時任務【Python 實戰】

1、crontab -e 編輯定時任務列表 crontab -e查看當前定時任務列表,長按 i 編輯,編輯完之后按 esc 退出編輯,然后輸入:wq 保存并提出。 如下: (base) charles@zl ~ % crontab -e58 15 * * * /Library/Frameworks/Python.framework/Versions/3.8/bin/python3 /Users/charle…

go go go 出發咯 - go web開發入門系列(三) 項目基礎框架搭建與解讀

go go go 出發咯 - go web開發入門系列(三) 項目基礎框架搭建與解讀 往期回顧 go go go 出發咯 - go web開發入門系列(一) helloworldgo go go 出發咯 - go web開發入門系列(二) Gin 框架實戰指南 前言 如…

【字節跳動】數據挖掘面試題0014:SQL中count(1), count(*), count(列)區別

文章大綱SQL 中 count(1)、count(*)、count(某列) 的區別一、核心定義與行為差異二、示例說明差異三、性能差異與優化四、適用場景建議五、面試應答要點六、索引掃描與全表掃描1. 索引掃描的觸發條件2. 全表掃描的適用場景3. 常見面試問題點Q1:索引掃描一定比全表掃…

Linux面試問題-軟件測試

1、你在上一家公司常用的Linux命令有哪些?答:使用vim/vi編輯文件,使用cat,more,less,head查看文件,使用grep過濾日志中的error,使用ps查看進程,使用top查看實時進程,netstat查看端口…

時序數據庫的存儲之道:從數據特性看技術要點

時序數據的獨特挑戰時序數據(Time-Series Data)是指按時間順序記錄的一系列數據點,在物聯網、金融、工業監控等領域無處不在。與傳統數據相比,時序數據具有幾個鮮明特點:時間導向性:每個數據點都帶有精確的時間戳高寫入量&#xf…

【vim中替換】

vim中替換1 : s/在Vim中經常高頻使用到的命令:1 : s/ :s 命令的基本語法是 :[range]s/{pattern}/{string}/[flags],其中: ? [range] 是可選的范圍,用于指定替換的行范圍。例如,% 表示全文,10,…

Qt實戰:使用QSqlDatabase連接MySQL,并實現增刪改查

文章目錄一、創建數據表二、連接MySQL數據庫三、封裝成一個完整的輕量級 ORM 風格類四、實現派生具體模型類五、支持多線程連接池 ORM 事務封裝一、創建數據表 數據庫名: 我們先創建一個數據庫,名字叫 game_db: CREATE DATABASE IF NOT E…

Python腳本保護工具庫之pyarmor使用詳解

概要 PyArmor是一個專門為Python代碼提供加密保護的第三方庫,旨在解決Python源代碼易被反編譯和泄露的安全問題。作為一種動態代碼保護工具,PyArmor能夠對Python腳本進行混淆和加密處理,有效防止源代碼被惡意獲取、分析或篡改。該庫特別適用于商業軟件開發、知識產權保護和…

倉頡編程語言:從入門到精通

為啥要瞅瞅倉頡這玩意兒? 有一說一,現在的編程語言多得跟米一樣,對吧?那一門新語言想火,沒點絕活兒肯定不行。倉頡(Cangjie)這哥們兒,是華為搞出來的新玩意兒,靜態編譯的…

線性探針是什么:是一種用于探測神經網絡中特定特征的工具

線性探針是什么 線性探針是一種在機器學習和相關領域廣泛應用的技術,用于評估預訓練模型特征、檢測數據中的特定序列等。在不同的應用場景下,線性探針有著不同的實現方式和作用: 評估預訓練模型特征:在機器學習中,線性探針是一種評估預訓練模型“特征遷移能力”的標準化方…