CODEWITHSUNDEEP
gatsby
Hilton Giesenow
Hilton Giesenow

Reputation: 10834

Gatsby site not rendering in IE 11

I've created a new site using the https://github.com/codebushi/gatsby-starter-photon template, and I've upgraded to the latest version of Node.js (12.16.1) and the latest Gatsby (2.20.1), but I can't get the site to render in IE or the original Edge browsers. I've tried a ton of things I've found on the net, and I'm injecting polyfill.js as well. In fact, I've tried injecting another polyfill directly into the system to support "forEach", but I'm still getting a blank page, and the following error:

Object doesn't support property or method 'forEach'

Can anyone help with this?

Upvotes: 1

Views: 1582

Answers (2)

Hilton Giesenow
Hilton Giesenow

Reputation: 10834

In the end this was nothing to do with Photon - I'd incorporated a component from somewhere else, so there was indeed a "forEach" in my own user code. The I.E. browser tools showed me where by clicking on the error to get a stack trace, and I had to change:

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

into

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");
            };
        }

then it all worked fine. Hopefully that can help someone else.

Upvotes: 0

Deykun
Deykun

Reputation: 1271

You can specify browsers support in package.json:

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

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

But maybe you don't need to do this. Gatsby in development mode doesn't work right on IE npm run develop, but meanwhile npm run build is working fine - you can test it with gastby serve after building.

Upvotes: 3

Related Questions