Encountered this document, indicating it's been a while since Gatsby 3 was released. So I spent some time to upgrade it, list a couple things that the doc didn't mention.

Use the Latest Gatsby

  1. modify the package.json, change the "gatsby" field to "^3.0.0"
  2. For M1 macbook users, I guess you have to use npm 7 at this moment, therefore the flag --legacy-peer-deps is a must

Run

npm install gatsby@latest --legacy-peer-deps

First step done!

Upgrade All the gatsby- Packages

Follow the doc, upgrade any packages that start with gatsby-, such as gatsby-plugin-manifest, or gatsby-remark-images, a faster way is to run

npm install gatsby-{package_1,package_2}@latest

to expand the packages with the same prefix

Issues Before "gatsby develop"

Let's run a local server to test:

> gatsby develop

react-is

Can't resolve 'react-is'

Easy. I don't know why but looks like in current dependencies, I got to install this package, so run:

npm install react-is@latest

Solved.

PostCSS

Error: PostCSS plugin postcss-flexbugs-fixes requires PostCSS 8.

Also easy, use the latest package to fix.

npm install postcss@latest

Null pointer for the SCSS component

Now I'm able to run gatsby develop and the server starts correctly, however, my scss was broken.

Before the import was

import PostStyles from './TwoColumnsPost.module.scss'
...

this.activeStyle = PostStyles.ActiveTocHeader  // error!

Apparently this way of import results the null point. After doing some research online, I realized that the new syntax is 

import * as PostStyles from './TwoColumnsPost.module.scss'

Refresh the page, it's on!

What Happens in the Meadow at Dusk?

Nothing (Everything).

So far Gatsby 3 works better than 2, one thing I noticed is when I write content in markdown, the server doesn't crash anymore, earlier when I was on Gatsby 2, the server will occassionally crash as I make edition, which is not a problem at all now. Very nice.

It's beautiful.