Question

我已经使用https://github.com/codebushi/gatsby-starter-photon模板创建了一个新站点，并且已经升级到最新版本的Node.js（12.16.1）和最新的Gatsby（2.20.1），但是我可以无法让网站在IE或原始Edge浏览器中呈现。我已经尝试了很多在网上找到的东西，并且也正在注入polyfill.js。实际上，我尝试将另一个polyfill直接注入系统以支持“ forEach”，但仍然出现空白页，并出现以下错误：

Object doesn't support property or method 'forEach'

任何人都可以帮忙吗？

Answer 1

您可以在package.json中指定浏览器支持：

{
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
}

https://www.gatsbyjs.org/docs/browser-support/

但是，也许您不需要这样做。处于开发模式的Gatsby无法在IE npm run develop上正常运行，但是与此同时npm run build可以正常工作-构建后，您可以使用gastby serve对其进行测试。

Answer 2

最后，这与Photon无关-我从其他地方合并了一个组件，因此在我自己的用户代码中确实存在一个“ forEach”。 I.E.浏览器工具通过单击错误以显示堆栈跟踪的方式向我显示了位置，我必须进行更改：

document.querySelectorAll(".navbar li").forEach(function (elem) { 
    elem.onclick = function() {
        document.getElementById("topnav").classList.remove("open");
    };
});

进入

var liElements = document.querySelectorAll(".navbar li");
        for (let i = 0; i < liElements.length; i++) {
            const elem = liElements[i];

            elem.onclick = function() {
                document.getElementById("topnav").classList.remove("open");
            };
        }

然后一切正常。希望可以帮助其他人。

盖茨比网站未在IE 11中呈现

2 个答案: