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
That’s how I spent my weekend, almost five hours has gone…
What about you?