文科少女學程式

這次碰到的問題其實是一個在任何開發情況下都有可能撞到的問題，仔細想想好像以前也曾撞到過一次，但是自己當時卻沒有那麼深刻的印象，為了避免自己再次撞到，所以想說把它給記錄下來。

排除異常錯誤問題
實作情境
這次是在替換元件的時候，碰到這個問題。我們自己有把包一個元件在專案內做使用，主要是在做emoji-picker的元件替換(這個元件是使用emoji-mart結合material-ui的元件組合成我們專案要的樣子和操作方式)，用舊版的元件不會有問題，但是換成新版的元件卻會跳出錯誤(如下圖)，且點擊後無法顯示應該要顯示的emoji popper。



除錯過程
1. 確認是否是新版元件應該帶入的props沒帶或帶錯。
2. 我這裡還有嘗試先把emoji-picker內的emoji的部分拿掉，替換成一般的文字，發現不會跳錯，popper也可以正常顯示，確認到更emoji-mart有關。
3. 近一步確認emoji-mart使用上有沒有錯誤，還是沒排查確切的問題點。

最終問題排除方式
最後發現原來是版本撞到，舊元件使用的emoji-mart版本是3.X.X，新元件使用的是5.X.X，使用的專案內已經有安裝的emoji-mart版本則為3.X.X，所以在使用舊元件的時候不會有問題，替換成新元件時則出現跳錯和無法開啟的狀況。最後把使用專案內的emoji-mart移除掉，單純使用打包好元件內的emoji-mart，才排除了這個問題。

雖然這次是在替換元件的時候發生，但感覺在其他不同但有點類似的情境中，可能也會撞到這個問題，所以當該檢查的方向都檢查過確認無誤時，也許可以往版本是否有衝突的方向下去排查。


貼心小提醒！！
因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。