Mac M1环境下使用create-react-app创建React项目失败求助

你在Mac M1（arm64架构）上使用npx create-react-app创建TypeScript模板的React项目时，触发了canvas模块的安装失败。核心原因有两个：

1. canvas v2.11.2没有提供对应Node v18（node-v108）的arm64预编译包，npm自动 fallback 到本地编译
2. 本地编译缺少pixman-1等系统依赖库，导致node-gyp编译失败

步骤1：安装编译所需的系统依赖 #

通过Homebrew安装必要的库：

brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

步骤2：配置环境变量（让node-gyp找到依赖） #

在当前终端执行以下命令临时配置：

export PKG_CONFIG_PATH="/opt/homebrew/lib/pkgconfig"

如果要让配置永久生效，将上述命令添加到你的~/.zshrc（或~/.bash_profile，取决于你用的shell）文件末尾，然后执行source ~/.zshrc使配置生效。

步骤3：重新创建项目 #

先清理之前的残留文件，再执行创建命令：

npx create-react-app kwr-chrome-extension --template typescript

备选方案：换用Yarn安装 #

如果npm依然报错，可以尝试用Yarn替代：

# 先全局安装Yarn（未安装时执行）
npm install -g yarn
# 创建项目
yarn create react-app kwr-chrome-extension --template typescript

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