sujingjhong.com


JS / IE11 中的 React is not defined

之前一如往常地升級公司產品中使用的相依套件,接著也部署到開發環境上,然後因為我們公司產品,至少需要支援到 IE 11,所以也有對程式碼進行 ES5 語法做檢查。

結果就是這個 moment,主管開啟 windows 7,進行 IE 11 相容性測試,沒想到就直接白畫面!

追蹤一下錯誤流程,是在 webapck 產生的 runtime.js 中發生錯誤,然後錯誤訊息是:

React is not defined	

很棒。

重新思考一下這 bug 發生過程,基本上就是當 webpack 中的 runtime.js 開始要執行各個檔案時,他要用到 React 這個套件時,此套件並不存在於環境當中。

這問題有幾種可能:

  1. 第三方套件並沒有被正確讀入
  2. 第三方套件其實有正確讀入,只是在 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 中他就不會逃逸。

於是為了保險起見,於是我們就將那個符號全部替換掉。解決這個問題。