之前一如往常地升級公司產品中使用的相依套件,接著也部署到開發環境上,然後因為我們公司產品,至少需要支援到 IE 11,所以也有對程式碼進行 ES5 語法做檢查。
結果就是這個 moment,主管開啟 windows 7,進行 IE 11 相容性測試,沒想到就直接白畫面!
追蹤一下錯誤流程,是在 webapck
產生的 runtime.js
中發生錯誤,然後錯誤訊息是:
React is not defined
很棒。
重新思考一下這 bug 發生過程,基本上就是當 webpack
中的 runtime.js
開始要執行各個檔案時,他要用到 React
這個套件時,此套件並不存在於環境當中。
這問題有幾種可能:
- 第三方套件並沒有被正確讀入
- 第三方套件其實有正確讀入,只是在
runtime.js
這隻程式執行期間,並未存在。
這時候我們在控制台打入了:
React
直接出現 undefined
,代表現在 windows
物件底下並未有 React
物件。
此時後我重新去看一下 html
載入各個 script 的順序,React
的確是優先於 runtime.js
載入,那此時沒有,代表 React
套件載入中發生了問題。
為求保險起見,我在執行正常的環境中,把 windows
物件內容枚舉起來,他們也都有正確的載入物件,存在 windows
物件底下。
接著我看一下 IE11
中的網路活動,突然發現 React 套件的網址竟然是:
https://cdn.jsdelivr.net/npm/react@%5E16.13.1/umd/react.production.min.js
中間竟然出現了逃逸字元!
接著再看正確運作的環境:
https://cdn.jsdelivr.net/npm/react@^16.13.1/umd/react.production.min.js
OK,答案揭曉了,原來是中間的 ^
符號,在 IE 11 中被逃逸掉了。
有趣的來了,我們用另一台 windows 10 的 IE 11開啟網站,沒想到竟然正常開啟?結果對一下版號,原來我們測試機中的 IE 11 是比較舊的,然後再較新的 IE 11 中他就不會逃逸。
於是為了保險起見,於是我們就將那個符號全部替換掉。解決這個問題。