Fixing esbuild related CPU architecture error on Apple silicon Macs
I ran into this issue recently where esbuild was complaining about the CPU architecture in VS Code. The project was running SvelteKit (v1) for some context. The error didn't disrupt anything I was doing, but I was sick of seeing the error message everywhere and decided to fix it. I've always run Rosetta v2 on my Apple silicon Macs because of compatibility concerns. Here's my article on Setting up ZSH with VS Code on Apple silicon Mac (M1 chip). But this was the first time Rosetta caused any conflicts in my workflows. I found a fix at the end and decided to share it, given how little people have written about this.
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.
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.
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!