A logo showing the text blog.marcnuri.com
Español
Home»Front-end»Gatsby: Disable source maps in production

Recent Posts

  • Fabric8 Kubernetes Client 6.5.0 is now available!
  • Eclipse JKube 1.11 is now available!
  • Fabric8 Kubernetes Client 6.4.1 is now available!
  • I bought an iPad
  • Three years at Red Hat

Categories

  • Front-end
  • Java
  • JavaScript
  • Legacy
  • Operations
  • Personal
  • Pet projects
  • Tools

Archives

  • March 2023
  • February 2023
  • January 2023
  • December 2022
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • December 2019
  • October 2019
  • September 2019
  • July 2019
  • March 2019
  • November 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • December 2017
  • July 2017
  • December 2015
  • November 2015
  • November 2008
  • November 2007
  • September 2007
  • August 2007
  • July 2007
  • June 2007
  • May 2007
  • April 2007
  • March 2007

Gatsby: Disable source maps in production

2019-07-27 in Front-end tagged Frontend / JavaScript / React / Static Site / Web / Webpack by Marc Nuri | Last updated: 2021-09-05
Versión en Español

Introduction

Gatsby is static site generator platform based in ReactJS and powered by GraphQL. I’ve been using Gatsby for a while now and most recently used it to rebuild my personal homepage.

One of the things that has come to my attention is that transpiled Javascript source maps are published to production builds by default in V2. It’s nice to be transparent and to publish your source code and share with the software community, but maybe this is an undesirable effect (especially when building commercial websites).

In this post we’ll see how we can configure Gatsby to publish source maps based on the environment for which we’re triggering the build (generate them for development environment and disable source maps in production environment).

Customizing Webpack configuration in Gatsby

Source map generation is controlled through Webpack configuration, more specifically in the devtool option. In a nutshell, what we want to do is modify Gatsby’s Webpack configuration when running the build script in order to disable source maps if the environment is production.

Gatsby offers the possibility to modify Webpack configuration, both for plugins or for your site by adding configurations to the file gatsby-node.js by using the action setWebpackConfig.

Following is the snippet inserted in my gatsby-node.js file:

1exports.onCreateWebpackConfig = ({ getConfig, actions }) => {
2  if (getConfig().mode === 'production') {
3    actions.setWebpackConfig({
4      devtool: false
5    });
6  }
7};

In line 2 we check if the build mode is 'production' in order to conditionally modify Webpack’s configuration devtool option (remember source maps are enabled by default in Gatsby). In lines 3-5 we override only devtool configuration option, setting it to false to disable source map generation.

It's important to highlight that the public directory is not cleaned by default when running gatsby build command. If you modified Webpack configuration after an initial build and you didn't clear the public directory you will still see remaining source maps from previous builds. You would normally add this as a step in your package.json scripts section.

Webpack ReactJS Gatsby
Webpack ReactJS Gatsby
Twitter iconFacebook iconLinkedIn iconPinterest iconEmail icon

Post navigation

← Fedora: How to install Cinnamon desktop environmentReact: Babel 7 support in boilerplate application →
© 2007 - 2023 Marc Nuri