This blog is bootstrapped with a framework called Gatsby. Gatsby is a static site generator that leverages React and provides numerous performance benefits. It's worked great in helping me get this site up and running quickly. Gatsby syncs up easily with Netlify and GitHub to detect any new push to main and publishes to prod within a minute. Gatsby also has a rich ecosystem of plugins to provide popular functionality.
This works splendidly 99% of the time, but to paraphrase Uncle Bob (of "Clean Code" fame), "Any time you work with a coding framework, you should be asking, 'How is this going to screw me?'"
Enter my images problem. I use CodePen for my code snippets here, and there's a convenient Gatsby plugin for it. After installed, you simply paste the link into your post's markdown and an interactive pen is embedded into your page.
My markdown turns from this:
https://codepen.io/chrisbridges/pen/ewayyO?editors=0010Everything was going swimmingly. After installing the plugin, I even went the extra mile and updated my other dependencies. Basking in the glow of best practices, I set off to write another industry-shattering essay. Then I realized that none of the images in my previous posts were rendering.
I could not for the life of me figure out why. They were there before. What could have changed? Given that the posts are simple markdown, there didn't seem much debugging to even attempt. I assumed it had to be a path issue. Maybe the package updates had implemented a breaking change and images needed to be imported differently now.
After hopelessly plugging-and-praying with my gatsby-config.js for way too long, I noticed that the object had two instances for gatsby-transformer-remark. Having tried every option: {} I could think of with the gatsby-source-filesystem, assuming that's where the error had to be, I looked up the docs for -transformer-remark. Turns out, this package is responsible for parsing .md files. We might be on to something.
As my luck would have it, my magical CodePen import had created its own reference to -transformer-remark and was overwriting my gatsby-remark-images plugin. I had sacrificed visual stimulation for code. Maybe not the worst lifestyle choice, but not for an engaging blog that maketh.
What Happened, in Simple Code
Basically, I had assigned an object key a value, overwritten that value, and then was mad when both values didn't persist. Whoops.
const myObj = {
myKey: 'myValue'
}
myObj.myKey = 'differentValue'
console.log(myObj.myKey === 'differentValue') // true
// Why you no array of both values? 🤔Don't Suffer My Fate
I'm going to explore how to proactively monitor and address this issue. I feel it should hopefully be fairly straight-forward and clearly valuable. I'll also be looking into making a pull request to Gatsby.
In the meantime, if you or someone you love has suffered from Gatsby Plugin conflicts, please share the code on your screen right now. Together, we can save dozens of developers from over-eagerly adding packages to their config.