在Gatsby出现错误之前，运行脚本在IE上显示警报和重定向

Question

我在Netlify上运行一个Gatsby网站，出现了一个特定于IE的错误/崩溃，如果用户使用IE，我想显示一个警报，然后重定向到chrome下载页面，因为我无论如何都不支持IE。我认为崩溃是由一个npm包引起的，我不想换另一个，因为它适合我的需要。

我把下面的脚本放在每个页面上运行的Layout组件中，但错误出现并使网站崩溃，网站在崩溃前会闪烁一个正常的dom。我想知道是否有任何方法可以修复

如果我将条件更改为chrome并在chrome上运行以测试，那么脚本运行良好

//Layout.js

const handleIE = () => {
if (typeof window !== "undefined") {
let ua = window.navigator.userAgent

if(ua.indexOf('MSIE') > -1) {
alert('Internet Explorer is not supported. Please use Chrome or Firefox')
window.location.href = "https://www.google.com/chrome/";
}
}
}
<Helmet>
<script>{handleIE()}</script>
</Helmet>

// Error log on IE
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
HTML1300: Navigation occurred.
SEC7118: XMLHttpRequest for https://ka-f.fontawesome.com/releases/v5.15.3/css/free.min.css?token=e4232fccfser required Cross Origin Resource Sharing (CORS).
SEC7118: XMLHttpRequest for https://ka-f.fontawesome.com/releases/v5.15.3/css/free-v4-shims.min.css?token=e4232fccfser required Cross Origin Resource Sharing (CORS).
SEC7118: XMLHttpRequest for https://ka-f.fontawesome.com/releases/v5.15.3/css/free-v4-font-face.min.css?token=e4232fccfser required Cross Origin Resource Sharing (CORS).
SCRIPT1003: Expected ':' File: classic.js, Line: 679, Column: 32
SCRIPT1003: Expected ':' File: classic.js, Line: 679, Column: 32
[object Error]
description "Object doesn't support property or method 'trunc'"
message     "Object doesn't support property or method 'trunc'"
name        "TypeError"
number      -2146827850
stack       "TypeError: Object doesn't support property or method 'trunc'
SCRIPT438:  Object doesn't support property or method 'trunc'
File: framework-7bdbbf12b92c7ff172a2.js, Line: 2, Column: 2442

谢谢！！

Answer 1

IE问题会在加载脚本之前破坏应用程序。尽管不太可能，因为您正在导入Layout组件的每个页面中加载脚本(您可能想要使用其中一个gatsby-browserAPI(，但您的代码似乎可以工作。

如果您想通过向IE显示警报来绕过此限制用户可能需要polyfill功能，至少允许使用trunc方法，这似乎是一个有问题的方法。

也就是说，这个trunc方法可能来自您的代码(不太可能(，也可能来自第三方依赖。如果它来自你的代码，只需将其删除或找到另一个IE友好的解决方案。如果它来自某个Node模块，您可能需要找到另一个解决方案。

首先，您需要找到导致此问题的依赖项，然后，正如本GitHub线程中所描述的那样。

在Gatsby项目的根目录下创建一个.babelrc：

{
"env": {
"test": {
"presets": [
"@babel/preset-env",
{
"loose": true,
"modules": "commonjs",
"useBuiltIns": "entry",
"targets": { "browsers": [">0.25%", "not dead"] }
}
]
}
},
"presets": [
"babel-preset-gatsby",
[
"@babel/preset-env",
{
"debug": true,
"loose": true,
"modules": false,
"useBuiltIns": "entry",
"targets": { "browsers": [">0.25%", "not dead"] }
}
]
],
"plugins": [
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
],
"babel-plugin-macros",
"@babel/plugin-syntax-dynamic-import",
[
"@babel/plugin-transform-runtime",
{
"helpers": true,
"regenerator": true
}
]
]
}

注意：您可能需要安装所需的模块

然后，您只需要添加polyfill。在您的gatsby-browser.js:中

import '@babel/polyfill'
// eslint-disable-next-line import/prefer-default-export
export const onClientEntry = () => {
// Without this function body the import will not be picked up.
// handleIE()
}

正如我在文章开头所说，这个gatsby-browser.jsAPI(onClientEntry(将适用于您的用例，因此您可以重用它。您可以在那里加载脚本(handleIE(来检查用户代理。这样，每个用户条目只加载一次脚本，而不是X次(每个页面扩展用户访问的Layout组件一次(

你可能还发现这个关于Gatsby中polyfill IE 10-11的GitHub要点很有用。