Some recent NODE_ENV and devDependencies woes

This site recently switched from Hugo to Eleventy. That meant dependencies that needed to be kept up to date. For this I use GitHub's amazing Dependabot. This worked flawlessly up until earlier this week. Dependabot had created a pull request to bump the version of eleventy-plugin-syntaxhighlight from 3.0.6 to 3.1.0 which somehow broke the build of the site.

As it was only a minor version bump nothing should have broken the build. Time to figure out what went wrong, where it went wrong and why it went wrong.

Problem numero uno

On my local machine everything was still building fine. It was only on Netlify's build servers that things went wrong. Strange.

Netlify's build logs showed that the Eleventy config complained about needing JSDOM but could not find it. This was even stranger as the change in @11ty/eleventy-plugin-syntaxhighlight that caused the version bump was about switching out JSDOM for LinkeDOM.

Either way, something seemed to be off with that dependency. Upon closer inspection I noticed that it was added under devDependencies and not under dependencies. So maybe devDependencies weren't being installed. That was easy enough to fix.

When you move a dependency from dependencies to devDependencies using npm install^[1], with the --save-dev flag, it will give you the following helpful message:

npm notice save <package-name> is being moved from dependencies to devDependencies

As it turns out this also works the other way around. To move a dependency from devDependencies to dependencies use the --save-prod flag.

npm notice save <package-name> is being moved from devDependencies to dependencies

I thought that that was what --save did but apparently that flag was removed around the time npm 5 was released! Who knew‽

Anyway, moving this (and a few other dependencies to dependencies) solved the first issue. Netlify's build servers were once again happily building away.

The other problem

With the first issue fixed, I still had to figure out why things were building fine locally but not on Netlify's build servers. So why exactly were devDependencies not installed?

From the npm docs for the npm install command:

With the --production flag (or when the NODE_ENV environment variable is set to production), npm will not install modules listed in devDependencies.

That rang a bell! A little while ago I started a blogpost on TailwindCSS. Tailwind uses PurgeCSS to get production builds down to a more reasonable size. With the NODE_ENV environment variable set to production Tailwind will automatically purge unused styles from your CSS… and I had already added the environment variable to the build server for the draft post. Doh.

So in the end what went ’wrong’^[2] was a combination of an environment variable that only existed on the build server and a few dependencies being under devDependencies in package.json.