這天，線上突然出現(xiàn)了一個(gè)bug，某個(gè)頁(yè)面打開(kāi)空白，看控制臺(tái)報(bào)錯(cuò)minified react error #130，在本地看卻是正常的，百思不得其解。

后來(lái)發(fā)現(xiàn)是由于線上項(xiàng)目它的包更新過(guò)了，而我本地的包沒(méi)有更新，所以我沒(méi)能復(fù)現(xiàn)這個(gè)錯(cuò)誤。

于是刪掉node_modules，然后重新下載依賴，再運(yùn)行項(xiàng)目，問(wèn)題果然復(fù)現(xiàn)了，在生產(chǎn)模式下，我們可以看到更詳細(xì)的提示：

image.png

image.png

由這兩條信息，我們現(xiàn)在可以可以定位問(wèn)題所在了，就是在我們SimRecordForm文件的145行附近，有一個(gè)element type is invalid的錯(cuò)誤。

根據(jù)定位我找到如下代碼

警報(bào)信息提示的位置

我們知道我們?cè)趓eact中寫的jsx會(huì)被babel編譯成React.createElement()模式，僅這段代碼來(lái)說(shuō)，它會(huì)轉(zhuǎn)換成

React.createElement(
                  'p',
                  {className:'ant-upload-drag-icon'},
                  React.createElement(InboxOutlined,null）
)

之前一直沒(méi)注意到的提示

發(fā)現(xiàn)是由于InboxOutlined組件找不到了，導(dǎo)致React.createElement第一個(gè)參數(shù)錯(cuò)誤，最終導(dǎo)致頁(yè)面空白

image.png

解決辦法就是把這個(gè)組件換掉······