Wanna see something cool? Check out Angular Spotify 🎧

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

Read more

 — How to configure TailwindCSS with Angular and why you should use it
 — NPM vs Bower vs Browserify vs Gulp vs Grunt vs Webpack
 — Migrating my blog from Github to Gitlab, and deploy to Netlify
 — What is JavaScript Closure?
 — Angular - Using Visitor design pattern with Typescript

Follow @trungvose on Twitter for more!