Get updates by email or on Twitter at @hughdurkin

How To Migrate To Gatsby 3.0, YOLO Style

I just migrated developerecosystem.com to Gatsby 3.0. It was painless, and took all of ten minutes.

Here's what I learned. Actually, first here's how I YOLO npm upgrades.

rm -rf package-lock.json
rm -rf node_modules
npm i -g npm-check-updates
ncu -u
npm install

If you're an experienced developer, and you're familiar with npm, I know what you're thinking.

Yes, I'm an idiot. And, yes, there's a lot that can go wrong here. Move fast and break things works out most of the time, but not all of the time. This time, not much broke.

Here's what needed some quick fixes (not all related to the migration):

  • Deleted gatsby-browser.js, some React Hydrate functions no longer made sense
  • Removed moment.js, something I had planned to do for a while
  • Removed a bloated sort function, something I had planned to do for a while
  • Edited childImageSharp graphql queries, replacing 'resolutions' with 'resize'
  • Migrated from gatsby-image to gatsby-plugin-image
  • Removed these plugins, as they're incompatible with 3.0 (I don't need em anyway)
    • gatsby-plugin-loadable-components-ssr
    • gatsby-plugin-remove-generator
    • gatsby-plugin-advanced-sitemap

That's it. All in the space of ten minutes or so. I'm happy with the results:

100/100 Lighthouse score, right out of the gate.