Browser Support

Gatsby supports the same browsers as the current stable version of React.js which is currently IE9+ as well as the most recent versions of other popular browsers.

Polyfills

Gatsby leverages Babel 7’s ability to automatically add polyfills for your target browsers.

Newer browsers support more JavaScript APIs than older browsers. For older versions, Gatsby (via Babel) automatically adds the minimum “polyfills” necessary for your code to work in those browsers.

If you start using a newer JavaScript API like [].includes that isn’t supported by some of your targeted browsers, you won’t have to worry about it breaking the older browsers as Babel will automatically add the needed polyfill core-js/modules/es7.array.includes.

Gatsby only automatically adds polyfills for your code (and not for your project’s dependencies in node_modules) at the moment. You can track work on this in this issue.

Specify what browsers your project supports using “Browserslist”

You may customize your list of supported browser versions by declaring a "browserslist" key within your package.json. Changing these values will modify your JavaScript (via babel-preset-env) and your CSS (via autoprefixer) output.

This article is a good introduction to the growing community of tools around Browserslist — https://css-tricks.com/browserlist-good-idea/

By default, Gatsby emulates the following config:

{
 "browserslist": [
   ">0.25%",
   "not dead"
 ]
}

If you only support newer browsers, make sure to specify this in your package.json. This will often enable you to ship smaller JavaScript files.

Note about IE < 11

React depends on collection types Map and Set. While these are not used by Gatsby, Gatsby uses React and you will need to polyfill these if you support older browsers and devices including IE < 11.

Read more about this in ReactJS Docs - JavaScript Environment Requirements