M1 MacBook Pro下创建React项目遇canvas问题求助

Hey there, let’s work through this canvas problem you’re facing when running npx create-react-app my-app on your M1 MacBook Pro with Node 15.4.1 and npm 7.0.15. Apple Silicon machines can have compatibility quirks with older Node/npm versions, especially around native modules like canvas—here are actionable fixes to try:

1. Upgrade Node.js to an LTS Version (Recommended) #

Node 15 is a non-LTS release and has limited support for M1 chips. LTS versions (16.x, 18.x, or 20.x) are far more stable for Apple Silicon:

• If you use nvm, run these commands:

  nvm install --lts
  nvm use --lts
  

• If you don’t have nvm, download the official M1-compatible arm64 installer directly from the Node.js website.

2. Force Canvas to Build for ARM64 Architecture #

Canvas relies on native binaries that need to be compiled for M1’s arm64 architecture. Try these steps:

• First, clear your npm cache to eliminate corrupted files:

  npm cache clean --force
  

• Set an environment variable to target arm64 before running create-react-app:

  export npm_config_target_arch=arm64
  npx create-react-app my-app
  

• If you already created the project, navigate to its directory and re-install canvas with the correct architecture:

  cd my-app
  npm uninstall canvas
  npm install canvas --target_arch=arm64
  

3. Upgrade npm to a Compatible Version #

npm 7.0.15 is quite outdated and may have bugs with M1. Update it to the latest version matching your Node LTS release:

npm install -g npm@latest

4. Use the Latest Version of create-react-app #

Sometimes the cached version of create-react-app in your system is outdated. Force the latest version to run:

npx create-react-app@latest my-app

Bonus Troubleshooting Step #

If none of the above works, try resetting your project dependencies:

cd my-app
rm -rf node_modules package-lock.json
npm install

内容的提问来源于stack exchange，提问作者AtomXV