All Articles

A painful Gatsby v1 to v2 migration

This morning, I spent about four hours to migrate my client website to Gatsby v2. Why this time? Because recently, we need to make a query for a special type of data that our source API only supports v2. It won’t work with Gatsby v1 anymore.

After following gatsby migration guide to

  • Update all the dependencies to support v2
  • Install React
  • Manually import Layout to wrap in each page and template
  • Update Layout to support Static Query
  • Convert to pure ES6 import
  • Import Link from Gatsby
  • Import graphql from Gatsby
  • Also, update the html.js to match with v2 content. I have to use it on my project to make use of jQuery and Webflow.
  • After these above changes, I also remove the node_modules and run npm i one more time to make sure there are no caches or differences on the dependencies.

Life is not that easy, after finishing all of the above steps. I run npm run develop and received tones of errors. I have to manually fix it, mostly came from the query of my API, which is hosted on DatoCMS

And after all of my efforts, I received the green line that I was expected.

A painful Gatsby v1 to v2 migration

But when I pushed to Netlify, I saw a weird message. I didn’t google right the way and I thought it was because my gatsby-plugin-netlify was not up-to-date. And I tried upgrading it and deploy again, still the same error.

A painful Gatsby v1 to v2 migration

A painful Gatsby v1 to v2 migration

I google it and turned out it was because of Node version configuration on Netlify was not matched with the required version. See gatsby/issues/24389 for more detail. I ended up fixing it by setting a higher Node.js version in Netlify by setting an environment variable NODE_VERSION to value 10.

A painful Gatsby v1 to v2 migration

A painful Gatsby v1 to v2 migration

That’s how I spent my weekend, almost five hours has gone…

What about you?

Published 19 Jun 2020

Recent Posts

What is JavaScript Closure?

In short, a closure is not the function that is returned in another function. A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function

How to configure TailwindCSS with Angular and why you should use it

This post gives you a glance at TailwindCSS and how to use it with Angular. If you're reading this and you don't know what TailwindCSS is, where have you been?


Follow @tuantrungvo on Twitter for more!