Upgrading to Gatsby V4!
Hi! 👋 It's been a while!
Things may not look different, but the site is different.
Today, the website is now running on Version 4 of Gatsby! 🎉 AND all of the other packages that are used to build this website have also been upgraded! 🙌
Upgrading Gatsby to version 4 has been on my list of things to do for a while, and recently I decided to tackle it. So here is a quick blog post about the steps I took on upgrading it. But why upgrade? Well...
- Up to a 40% reduction in build times
- JavaScript and CSS bundling performance improvements
And more!
Also, a lot of my packages were outdated. Here's the list of outdated packages before I upgraded.
As you can tell, that's an embarassing amount of outdated packages. Seriously, I've been running on Gatsby version 2 for nearly two and a half years. And then there is the rest of the packages that are outdated by several major versions as well!
Better late than never! Let's upgrade all these packages.
I've never really done anything like this before, my experience with Node is very limited. So I decided to update each package from the list and make the appropriate changes in the package.json file.
But things didn't exactly go to plan at first, I received plenty of errors trying to install the latest versions of the packages (which I expected, I mean I am jumping from version 2 to version 4!). In the end, I ended up running the following command:
npm install --legacy-peer-deps
This helped me resolve all of the problems I was having, hooray! My website could run locally, everything looked good! So I created a pull request and began the process of merging the changes into main.
I also had to add a new package called 'gatsby-plugin-postcss'- and the command for installing legacy dependencies helped with this too.
And then something unexpected happened.
Netlify ran into an issue with the version of Node that was installed.
5:12:55 PM: $ gatsby build
5:12:56 PM: error Gatsby requires Node.js 14.15.0 or higher (you have v12.18.0).
5:12:56 PM: Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js
This is strange. The version I have on my machine is version 14 and Gatsby builds the application locally. So what on earth is going on?
Naturally, I went to StackOverflow and thankfully, I was not alone in this problem. Someone had the same problem. The problem is (as explained by Ferran Buireu on StackOverflow):
The problem is that you have Node 17.2.0. locally but in Netlify's environment, you are running a lower version (by default it's not set as 17.2.0). So the local environment is OK, Netlify environment is KO because of this mismatch of Node versions.
When Netlify deploys your site it installs and builds again your site so you should ensure that both environments work under the same conditions. Otherwise, both node_modules will differ so your application will have different behavior or eventually won't even build because of dependency errors.
You can easily play with the Node version in multiple ways but I'd recommend using the .nvmrc file. Just run the following command in the root of your project:
node -v > .nvmrcThis should create a .nvmrc file containing the Node version (node -v) in it. When Netlify finds this file during the build process, it uses it as a base Node version so it installs all the dependencies accordingly.
The file is also useful to tell other contributors which Node version are you using.
Well, I didn't know that!
So, after creating a .nvmrc file, Netlify was happy and successfully deployed the branch!
At this stage, I was happy with the changes and decided to merge the changes into main.
Success!
So, what did I learn from all this?
- Update your packages often
- Read the documentation!
- Keep up to date with changes
And that wraps it up!
Apologies for the short post, I'm super busy with other things (which I'll talk about soon).
Thanks for reading! 👍
