Published on

Gatsby, terser, and source-maps

Last Modified on
Last modified on
Authors
Gatsby, terser, and source-maps
Photo by Andrew Neel on Unsplash

The past couple of days I have been working on adding a netlify-cms to my Gatsby site. Not that I want it for myself necessarily, although it is great to have an alternative when wanted or needed, but I want to make blogging life as easy as possible for my clients.

I already host my Gatsby sites on Netlify, and highly recommend it for my clients. However, out of the box, without certain tooling, they would have to have a Git repo somewhere, link it to a Netlify account, and then be able to update their sites via push to remote. That takes some technical skill and therefore extra time on their part.

That's where Netlify's Git Gateway comes in. It is a new Netlify feature currently in beta, and adding it to the Gatsby/Netlify toolbox means clients don't need to have either a Github account (or any kind of Git account) or a Netlify account. And that is HUGE!

There have been a few bumps along the way due to certain incompatibilities which had to be fixed. I have fixed the first round which makes it possible at least locally to access the CMS via Github. Still working on that and awaiting some answers. Same with Git Gateway. It will happen eventually, but we're working with new updates and tooling, so the ride is always a bit bumpy at first.

Gatsby devs! Apparently, there is an issue with the terser package, a new peer dependency addition to Gatsby which has been causing source-map hell on build.

For those using yarn, the "resolution" seems fairly simple. However, depending on what other packages you are using, it might not work equally across projects. This is the (temporary) fix if you are using yarn:

"resolutions": {
  "terser": "4.0.0"
}

This should be added to your package.json. In other words, you install the terser package version 4.0.0 as a dependency at the root of your project, and then add the above code to your package.json.

This was nine days ago. The latest version of terser is 4.1.2 (at least as of this morning), and I tried this one out. I thought it far enough away from the troublesome version 4.0.1. Indeed, it has done the trick locally, but I did things a bit differently, since I am using npm.

There IS an npm version of resolutions out there. It utilizes the npm package npm-force-resolutions. I had to do the following in order to run a successful build in my Gatsby project:

rm -rf node_modules
npx npm-force-resolutions
npm i

Then I ran

npm run build

This time my build was successful. I also commented out my custom webpack configs related to source-maps in my gatsby-node.js file before running the build. This was to ensure that the fix actually worked. And it did … locally.

I will first be pushing my changes to a remote feature branch to see if the *Netlify build passes. If it does, then I will push it to staging and then master, as long as it continues to pass muster.

Note: This terser "bug" has to be fixed. I don't consider the workaround to be stable and will not be adding Netlify CMS to production anywhere until it has been fully fixed without resolutions.

Correction: I did keep the following custom webpack config in gatsby-node.js when I ran the (successful) build:

// turn off sourcemaps in production build no longer works
exports.onCreateWebpackConfig = ({ actions, stage }) => {
	// If production JavaScript and CSS build
	if (stage === 'build-javascript') {
		// Turn off source maps
		actions.setWebpackConfig({
			devtool: false,
		})
	}
}

Previously, on its own without the resolution, the build had failed.

I will be embedding this episode of Plugging in The Holes along with a transcript in the form of a post on interglobalmedianetwork.com for your hearing and reading pleasure. I will be including the related resource links mentioned in the podcast of course. Always do. Bye for now!

View on GitHub