Esbuild complaining I had installed the wrong package for my platform

Everything went smoothly until I tried to add SCSS to the project, which I have covered in a previous article How to add SCSS or SASS to SvelteKit. Later I tried to use TypeScript in the same project and saw the same error. In both cases, the error looked like this:

You installed esbuild on another platform than the one you're currently using.
This won't work because esbuild is written with native code and needs to
install a platform-specific binary executable.

Specifically the "@esbuild/darwin-x64" package is present but this platform
needs the "@esbuild/darwin-arm64" package instead. People often get into this
situation by installing esbuild with npm running inside of Rosetta 2 and then
trying to use it with node running outside of Rosetta 2, or vice versa 
(Rosetta 2 is Apple's on-the-fly x86_64-to-arm64 translation service).

If you are installing with npm, you can try not copying the "node_modules"
directory when you copy the files over, and running "npm ci" or "npm install"
on the destination platform after the copy. Or you could consider using yarn
instead which has built-in support for installing a package on multiple
platforms simultaneously.

If you are installing with yarn, you can try listing both this platform and the
other platform in your ".yarnrc.yml" file using the "supportedArchitectures"
feature: https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures
Keep in mind that this means multiple copies of esbuild will be present.

Another alternative is to use the "esbuild-wasm" package instead, which works
the same way on all platforms. But it comes with a heavy performance cost and
can sometimes be 10x slower than the "esbuild" package, so you may also not
want to do that.

Debugging

First attempt - switch over from PNPM to Yarn

As shown in the error message, it recommends using Yarn due to its ability to support and configure multiple architectures via .yarnrc.yml. I was using PNPM at the time, so I thought this was what I was missing. So I tried switching over to Yarn, added the config file, and filled in the necessary configs, but sadly, it did nothing.

supportedArchitectures:
  os:
    - 'current'
  cpu:
    - 'arm64'

Second attempt - Switching over to ZSH shell instead of Rosetta shell

I thought it might be the way I am installing NPM packages. I have been running yarn install using Rosetta shell, which I've configured to run in x64 CPU architecture mode instead of the default arm64.

Here's a screenshot proving Rosetta shell (the one on the right) is running in x64 architecture mode.

I checked my package.json, which doesn't include esbuild, so it must be a nested dependency. After checking yarn.lock file, I was happy with that theory.

Then I removed my node_modules folder and installed it again. Unfortunately, nothing changed.

Third attempt - reinstalling node

Finally, I stumbled on to this Github issue comment, which suggested running node -p "process.arch" command to see which architecture Node is running on. And both ZSH shell and Rosetta shell were returning x64. So there is the issue.

The fix

I use NVM to manage my Node versions on my machine, so your fix may vary. The goal is to uninstall the current node and reinstall it using the terminal shell in arm64 mode. These were the commands I used, given I have NVM:

nvm uninstall 16
nvm install 16

After that was done, I ran node -p "process.arch" in the ZSH shell it returned arm64.

The next step is to remove and reinstall all the node packages again.

rm -rf node_modules
yarn

Now check VS Code (it may need a reload), and the annoying errors should be gone!