November 03, 2019
It's been a while since I've run into this issue but a recent deployment to Netlify brought back some painful memories.
Recently I added social media sharing buttons to my post pages. I ran
gatsby build && gatsby serve, the build completed successfully and everything looked good locally. I pushed to my master branch and sat back waiting for a minute or two while Netlify did its thing. I refreshed my browser expecting to see the changes live on my site but they weren't there. I tried a hard refresh thinking maybe I was just seeing an old version of my site... no dice.
Pulling up my Netlify account I quickly discovered that the build had failed. Opening the logs, it didn't take me long to find the source of the issue.
The error momentarily threw me because I knew that path was correct *and* the build had passed on my machine. On closer inspection of my assets directory I discovered that the svg file was, in fact, all in lower case, meaning the path to that asset should have actually been:
.svg'. So why did the build pass on my Mac and not on Netlify? It's because of case sensitivity.
Windows and Mac are case insensitive which means I could've included something like '
LiNkeDiN.svg' in the path to the linkedin.svg asset and the build still would have passed because my machine simply doesn't care about case. However Netlify, which uses Linux under the covers for the build image, does care about case sensitivity. If you have one wrong character, just as I did, and you're working with anything that uses Linux, well, your shit just ain't going to work.
Take care when naming files, friends. Pick a case, stick with it, and be mindful of those import paths.