Skip to content
bobby_dreamer
GithubLinkedIn

Migrating from GatsbyJS 2.16.2 to 3.9.0

— time-wasted, gatsbyjs — 2 min read

Update : 2021/Oct/17

  1. Earlier title was misleading, it said Migrating from GatsbyJS 3 to GatsbyJS4, now i have corrected that and put in the right version.

  2. After upgrading Gatsby to 3.14.2 and gatsby-theme-minimal-blog to commit c40bd5e, the slowness issue mentioned below is resolved.

    Note: Not changing the link-name as it could lead to a 404.

Basically the intention was not to migrate but to add following features to the existing site and while executing Gatsby CLI commands saw there was a new version available. So why not ? thats how it started.

  1. Upgrade to Google Analytics 4 as i have been getting emails from Google - Success
  2. Wanted to add Latex Support to the site as i wanted to showoff some math stuff - Failed
  3. Add Table of Content plugin - Failed

What did i do

  1. Upgraded NodeJS from v10.16.3 to v14.17.3 ( typical windows installation )
  2. Upgraded NPM from 6.11.3 to 7.20.0
1npm -g uninstall npm
2npm -g i npm
  1. Upgraded gatsby-cli from 2.16.2 to 3.9.0
1npm -g uninstall gatsby-cli
2npm -g i gatsby-cli

  1. Created a new folder bdv3g3, went in and cloned
    git clone https://github.com/LekoArts/gatsby-starter-minimal-blog.git

  2. Went into the folder and did npm install --legacy-peer-deps as per instructions in README.md

  3. After installs tried gatsby develop --verbose it failed with below messages. 

1ERROR #98124  WEBPACK
2

3Generating development SSR bundle failed
4

5Can't resolve '@reach/router/lib/utils' in 'D:\BigData\08. HTML\Gatsby\lupin\bdv3g3\gatsby-starter-minimal-blog\.cache'
6

7If you're trying to use a package make sure that '@reach/router/lib/utils' is installed. If you're trying to use a local file make sure that the path is correct.  
8

9File: .cache\find-path.js
10

11

12 ERROR #98124  WEBPACK
13

14Generating development SSR bundle failed
15

16Can't resolve 'gatsby-link' in 'D:\BigData\08. HTML\Gatsby\lupin\bdv3g3\gatsby-starter-minimal-blog\.cache'
17

18If you're trying to use a package make sure that 'gatsby-link' is installed. If you're trying to use a local file make sure that the path is correct.
19

20File: .cache\gatsby-browser-entry.js
21

22

23 ERROR #98124  WEBPACK
24

25Generating development SSR bundle failed
26

27Can't resolve 'gatsby-react-router-scroll' in 'D:\BigData\08. HTML\Gatsby\lupin\bdv3g3\gatsby-starter-minimal-blog\.cache'
28

29If you're trying to use a package make sure that 'gatsby-react-router-scroll' is installed. If you're trying to use a local file make sure that the path is        
30correct.
31

32File: .cache\gatsby-browser-entry.js
33

34not finished Building development bundle - 13.588s
  1. Ran npm outdated
1D:\BigData\08. HTML\Gatsby\lupin\bdv3g3\gatsby-starter-minimal-blog>npm outdated
2Package                              Current   Wanted  Latest  Location                                          Depended by
3@lekoarts/gatsby-theme-minimal-blog    2.7.6    2.7.6   3.0.2  node_modules/@lekoarts/gatsby-theme-minimal-blog  gatsby-starter-minimal-blog
4gatsby                               2.32.13  2.32.13   3.9.1  node_modules/gatsby                               gatsby-starter-minimal-blog
5gatsby-plugin-feed                    2.13.1   2.13.1   3.9.0  node_modules/gatsby-plugin-feed                   gatsby-starter-minimal-blog
6gatsby-plugin-gatsby-cloud             1.0.2    1.0.2   2.9.1  node_modules/gatsby-plugin-gatsby-cloud           gatsby-starter-minimal-blog
7gatsby-plugin-google-analytics        2.11.0   2.11.0   3.9.0  node_modules/gatsby-plugin-google-analytics       gatsby-starter-minimal-blog
8gatsby-plugin-manifest                2.12.1   2.12.1   3.9.0  node_modules/gatsby-plugin-manifest               gatsby-starter-minimal-blog
9gatsby-plugin-netlify                 2.11.1   2.11.1   3.9.0  node_modules/gatsby-plugin-netlify                gatsby-starter-minimal-blog
10gatsby-plugin-offline                 3.10.2   3.10.2   4.9.0  node_modules/gatsby-plugin-offline                gatsby-starter-minimal-blog
11gatsby-plugin-sitemap                 2.12.0   2.12.0   4.5.0  node_modules/gatsby-plugin-sitemap                gatsby-starter-minimal-blog
  1. Ran npm to update all the outdated packages forcefully like below to see what happens as i couldn't get any workable results even after couple of hours, googling and S.O
1npm install @lekoarts/gatsby-theme-minimal-blog@latest gatsby@latest gatsby-plugin-feed@latest 
2gatsby-plugin-gatsby-cloud@latest gatsby-plugin-google-analytics@latest gatsby-plugin-manifest@latest gatsby-plugin-netlify@latest gatsby-plugin-offline@latest gatsby-plugin-sitemap@latest --force

NPM should develop an easy command to forcefully upgrade all the dependent packages

After this forceful update, to my surprise, there were no errors.

Now to the main goals

  1. Failed : Wanted to add Latex Support to the site as i wanted to showoff some math stuff. Tried

    • Plugins : gatsby-remark-katex
    • Plugins : gatsby-remark-mathjax
    • User Sixian Li using the same starter pack has done it. Tried it out but it didn't work for me.
    • Tried approach mentioned in Gatsbyjs with MDX and Latex Equations
    • Read many other articles nothing worked. Giving up

  2. Success : Upgrade to Google Analytics 4

    1npm uninstall gatsby-plugin-google-analytics
    2# Remove related section from gatsby-config.js -> plugins
    3npm install gatsby-plugin-google-gtag
    4# Update the code mentioned in the gatsby plugin site

  3. Failed : Add Table of Content plugin. Tried

This whole thing wasted 2 days of my time.

Wish LekoArts adds following to this starter pack
  • Latex support
  • Table of Contents

Gatsby Experience 3.9.0

  • gatsby build --verbose - Build time increased by 10mins. Earlier it was 10mins now its 22mins and taking lots of memory than usual enough to restart the computer.

Lots of Memory for simple site

  • gatsby develop --verbose - Every page click browsing within the site, is taking long time to process. Earlier it doesn't take time unless that page is updated.

# Next steps after migrating