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
npm install, with the
--save-dev flag, it will give you the following
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
dependencies use the
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:
--productionflag (or when the
NODE_ENVenvironment variable is set to
production), npm will not install modules listed in
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’ was a combination of an environment variable
that only existed on the build server and a few dependencies being under
Instead of, you know, manually editing
package.jsonlike an animal. ↩︎
Actually not wrong at all but exactly according to all the docs. ↩︎