Mac本地部署Gatsby电商主题时npm install失败求助
求助:Mac OS本地部署gatsby-ecommerce-theme时npm install报错
我正尝试在Mac OS(M1芯片)本地部署gatsby-ecommerce-theme仓库,严格按照说明操作,但执行sudo npm install时出现报错,错误日志如下:
maxdenhoed@m1-macbook-pro gatsby-ecommerce-theme % sudo npm install npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825 npm WARN Found: react@18.2.0 npm WARN node_modules/react npm WARN react@"^18.0.0" from the root project npm WARN 8 more (@gatsbyjs/reach-router, gatsby, gatsby-link, ...) npm WARN npm WARN Could not resolve dependency: npm WARN peer react@"0.0.0-experimental-c8b778b7f-20220825" from react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825 npm WARN node_modules/react-server-dom-webpack npm WARN react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from gatsby@4.25.0 npm WARN node_modules/gatsby npm WARN npm WARN Conflicting peer dependency: react@0.0.0-experimental-c8b778b7f-20220825 npm WARN node_modules/react npm WARN peer react@"0.0.0-experimental-c8b778b7f-20220825" from react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825 npm WARN node_modules/react-server-dom-webpack npm WARN react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from gatsby@4.25.0 npm WARN node_modules/gatsby npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: react-side-effect@2.1.1 npm WARN Found: react@18.2.0 npm WARN node_modules/react npm WARN react@"^18.0.0" from the root project npm WARN 8 more (@gatsbyjs/reach-router, gatsby, gatsby-link, ...) npm WARN npm WARN Could not resolve dependency: npm WARN peer react@"^16.3.0 || ^17.0.0" from react-side-effect@2.1.1 npm WARN node_modules/react-side-effect npm WARN react-side-effect@"^2.1.0" from react-helmet@6.1.0 npm WARN node_modules/react-helmet npm WARN npm WARN Conflicting peer dependency: react@17.0.2 npm WARN node_modules/react npm WARN peer react@"^16.3.0 || ^17.0.0" from react-side-effect@2.1.1 npm WARN node_modules/react-side-effect npm WARN react-side-effect@"^2.1.0" from react-helmet@6.1.0 npm WARN node_modules/react-helmet npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. npm WARN deprecated puppeteer@7.1.0: Version no longer supported. Upgrade to @latest npm WARN deprecated devcert@1.2.0: critical regex denial of service bug fixed in 1.2.1 patch npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates. npm WARN deprecated async-cache@1.1.0: No longer maintained. Use [lru-cache](http://npm.im/lru-cache) version 7.6 or higher, and provide an asynchronous `fetchMethod` option. npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797) npm WARN cleanup Failed to remove some directories [ npm WARN cleanup [ npm WARN cleanup '/Users/maxdenhoed/Documents/1. Projects/GoReach/website2/gatsby-ecommerce-theme/node_modules/msgpackr-extract', npm WARN cleanup [Error: ENOTEMPTY: directory not empty, rmdir '/Users/maxdenhoed/Documents/1. Projects/GoReach/website2/gatsby-ecommerce-theme/node_modules/msgpackr-extract'] { npm WARN cleanup errno: -66, npm WARN cleanup code: 'ENOTEMPTY', npm WARN cleanup syscall: 'rmdir', npm WARN cleanup path: '/Users/maxdenhoed/Documents/1. Projects/GoReach/website2/gatsby-ecommerce-theme/node_modules/msgpackr-extract' npm WARN cleanup } npm WARN cleanup ], npm WARN cleanup [ npm WARN cleanup '/Users/maxdenhoed/Documents/1. Projects/GoReach/website2/gatsby-ecommerce-theme/node_modules/sharp', npm WARN cleanup [Error: ENOTEMPTY: directory not empty, rmdir '/Users/maxdenhoed/Documents/1. Projects/GoReach/website2/gatsby-ecommerce-theme/node_modules/sharp'] { npm WARN cleanup errno: -66, npm WARN cleanup code: 'ENOTEMPTY', npm WARN cleanup syscall: 'rmdir', npm WARN cleanup path: '/Users/maxdenhoed/Documents/1. Projects/GoReach/website2/gatsby-ecommerce-theme/node_modules/sharp' npm WARN cleanup } npm WARN cleanup ], npm WARN cleanup [ npm WARN cleanup '/Users/maxdenhoed/Documents/1. Projects/GoReach/website2/gatsby-ecommerce-theme/node_modules/sharp', npm WARN cleanup [Error: ENOTEMPTY: directory not empty, rmdir '/Users/maxdenhoed/Documents/1. Projects/GoReach/website2/gatsby-ecommerce-theme/node_modules/sharp'] { npm WARN cleanup errno: -66, npm WARN cleanup code: 'ENOTEMPTY', npm WARN cleanup syscall: 'rmdir', npm WARN cleanup path: '/Users/maxdenhoed/Documents/1. Projects/GoReach/website2/gatsby-ecommerce-theme/node_modules/sharp' npm WARN cleanup } npm WARN cleanup ] npm WARN cleanup ] npm ERR! code 1 npm ERR! path /Users/maxdenhoed/Documents/1. Projects/GoReach/website2/gatsby-ecommerce-theme/node_modules/puppeteer npm ERR! command failed npm ERR! command sh -c node install.js npm ERR! The chromium binary is not available for arm64. npm ERR! If you are on Ubuntu, you can install with: npm ERR! npm ERR! sudo apt install chromium npm ERR! npm ERR! npm ERR! sudo apt install chromium-browser npm ERR! npm ERR! /Users/maxdenhoed/Documents/1. Projects/GoReach/website2/gatsby-ecommerce-theme/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:115 npm ERR! throw new Error(); npm ERR! ^ npm ERR! npm ERR! Error npm ERR! at /Users/maxdenhoed/Documents/1. Projects/GoReach/website2/gatsby-ecommerce-theme/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:115:27 npm ERR! at FSReqCallback.oncomplete (node:fs:207:21) npm ERR! npm ERR! Node.js v18.13.0 npm ERR! A complete log of this run can be found in: npm ERR! /Users/maxdenhoed/.npm/_logs/2023-01-07T08_56_09_427Z-debug-0.log
我的初步分析:
安装sharp和msgpackr-extract包时出现目录无法删除的错误(提示ENOTEMPTY),可能是之前的安装残留或进程占用导致。但最终导致安装失败的核心原因是puppeteer@7.1.0不支持arm64架构(M1 Mac),无法下载对应Chromium二进制文件。
解决方案
1. 彻底清理安装残留
先把所有旧的安装文件和缓存清干净:
- 关闭所有可能占用
node_modules的程序(比如VS Code、终端里的npm进程) - 执行命令删除目录和锁文件:
rm -rf node_modules rm package-lock.json - 清理npm缓存:
npm cache clean --force
2. 解决Puppeteer的arm64兼容问题
选以下两种方案之一:
方案一:升级Puppeteer版本
编辑项目的package.json,把puppeteer的版本从7.1.0改成^10.0.0(或更高版本,这些版本原生支持M1 Mac),然后重新执行:
npm install
方案二:跳过Chromium下载,使用系统已安装的Chrome
先在Mac上安装Google Chrome,然后执行以下命令安装依赖(指定使用系统Chrome):
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true PUPPETEER_EXECUTABLE_PATH=/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome npm install
3. 处理peer依赖警告(可选)
如果要解决那些react版本冲突的警告,可以在package.json里添加overrides字段(需要npm 8.3及以上版本):
"overrides": { "react-server-dom-webpack": { "react": "^18.2.0" }, "react-side-effect": { "react": "^18.2.0" } }
添加后重新执行npm install即可覆盖冲突的peer依赖要求。
内容的提问来源于stack exchange,提问作者Max den Hoed
相关产品推荐
相关产品推荐

