How to Disable Source Maps in Gatsby v2

Halp! My head is full of maps… Photo by Slava Bowman on Unsplash

Gatsby.js is a great tool for building static websites using React. In addition, it uses the principles of progressive web applications to make them “blazingly fast”. I was building my first static website using version 2 and came across the problem of source maps.

Source maps can be great. They help you debug your code in a readable way. But sometimes you just don’t want them in production. I won’t judge whether you want them or not, but I will give you the tools to disable them.

By default, Gatsby enables source maps for production builds. To disable them, we need to provide a custom Webpack configuration to Gatsby. In your gatsby-node.js file in the root directory of your project, add the following snippet:

Note that you must delete your /public/ folder before running the build step if you have previously run it with source maps enabled.

The build step doesn’t delete the public folder before creating new files. We do this to cut down on build times for repeat builds (e.g. images don’t need to be regenerated every time). —Jason Lengstorf, Developer Advocate at Gatsby

If you do not have a continuous deployment process set up (like through Netlify), you can modify your build script to delete the /public/ folder before running the build like so: rm -rf public && gatsby build.

To further your learning: