Problem

It's been a while since I updated my site last time. Somehow after I upgraded my node version, everything is broken:

Run npm install, it throws a bunch of errors.

Although I can still add posts, which is merely adding .md file, I can't run a local version of the preview anymore. This is NOT acceptable! After a couple hours search online, here is a workable solution step by step.

1. Check shell architecture

This is something I newly learned. Apparently by default the terminal in M1 Mac runs under ARM architecture, you can check by:

> arch
arm64

arm64 means you are running with ARM instructions.

What we need is Rosetta2, which translates ARM to X86. Install it if you don't have one with:

> softwareupdate --install-rosetta

Then enter a shell run under Rosetta2, for my case I use zsh, therefore:

> arch -x86_64 /bin/zsh

Now run arch command again:

> arch
i386

2. Downgrade to Node 15

Sample errors may be:

npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2

# Or
error: no template named 'remove_cv_t' in namespace 'std'; did you mean 'remove_cv'?

These issues bothered me for the most of the time, then I found this post.

Downgrade node version is simple with nvm. After installation, run:

> nvm install 15

nvm will install and switch to node with version 15.x. Verify with:

> node -v
v15.14.0

> npm -v
7.7.6

Things should work!

Now npm install should work. After install all the node modules, with gatsby develop, we are back on track, baybee!

> gatsby develop

...

You can now view a process in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build

What I learned

I'd rather buy an Intel based Mac. :)