Skip to content

bobby_dreamer

Migrating from GatsbyJS 3 to GatsbyJS 4

time-wasted, gatsbyjs1 min read

Main reason to migrate was

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

What i did

  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 migration wasted actually 2 days of my time.

Wish LekoArts adds

  • Latex support
  • Table of Contents

# Next steps after migrating