Quick Internet Explorer blocking page for HTML or Gatsby

MSIE is finally about dead, with only 2% of global market share remaining. Edge makes developing websites a whole lot easier! I recently ran into a problem where Internet Exploder was so broken, it couldn’t even render a polite “please use another browser” message client-side because it was choking on common.js.

First, if you’re just using vanilla HTML the script looks like this:

For Gatsby I found it was best to inject a script into the HEAD of the page that runs on load. This avoids a snag with client-side scripting if the browser crashes before it can even get to it.

Add this script in a file called gatsby-ssr.js in the root of your project.

You could obviously style the page and do more with it — I’ve seen a few nice page layouts online that provide browser badges and links — but I kept this solution as simple and light as possible. Also simplest was just replacing the body contents directly, no fiddling around with adding and removing nodes.

By leaving it relatively unstyled except for a generic Sans-serif font, it should adopt your site’s base styles pretty well.

Our site loads white-on-blue styles so the message looks fairly on-brand without any additional styling.

Hope that helps someone out. Come visit us at Y’all sometime!