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.

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.

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.

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

What about you?