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

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

This post give you a quick glance of 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?

NPM vs Bower vs Browserify vs Gulp vs Grunt vs Webpack

Repost my killer answer on StackOverflow with more than 600 votes


Follow @tuantrungvo on Twitter for more!