Webpack 5 polyfills and Gatsby



Published: 3/28/2021

Gatsby has a lot of plugins that make some things fairly turnkey.

Gatsby also has a lot of gotcha moments where the docs just don't quite make sense.

The newest gotcha is the lack of default polyfills. If you've encountered this you've probably come across enough Stackoverlow questions and issue tickets on Github to know that solving this is a headache. Nothing quite works, because it's everything Webpack is absracted into gatsby-node.

Everything I found in those Stackoverlow questions and Github issues was wrong. In the end, the solution was 1 package.

yarn add node-polyfill-webpack-plugin

Then stick the following in your gatsby-node file at the root of your project, and your default polyfills will be back in action.

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [new NodePolyfillPlugin()],
  });
};