WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 5 months ago

#52356 new defect (bug)

npm install does not work on wordpress-trunk on new Mac M1's

Reported by: justinahinon Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.7
Component: Build/Test Tools Keywords: reporter-feedback
Focuses: Cc:

Description

I've been trying to run a development environment to contribute to WordPress on my new MacBook M1 for some time now, but I go through a lot of mistakes every time.

The first one is that some libraries used by WordPress Core are not yet supported on the ARM architectures of the new Macs (I guess).

For example, running npm install from a folder with WordPress Trunk returns this error:

Error
    at /Users/segbedji/wp/wordpress-develop/node_modules/grunt-contrib-qunit/node_modules/puppeteer/lib/BrowserFetcher.js:112:19
    at FSReqCallback.oncomplete (fs.js:183:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! puppeteer@4.0.1 install: `node install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the puppeteer@4.0.1 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

After some research, the puppeteer package has several incompatibilities with the Macs M1, and many issues have already been reported on their repo: https://github.com/puppeteer/puppeteer/issues/6622, https://github.com/puppeteer/puppeteer/issues/6634.

Some solutions have been proposed on the issues. Like this one (https://github.com/puppeteer/puppeteer/issues/6622#issuecomment-759840596) that doesn't work on my end.

But it looks like there is an official fix here https://github.com/puppeteer/puppeteer/commit/9a8479a52a7d8b51690b0732b2a10816cd1b8aef. So I guess upgrading the package version on our end could fix the issue.

Change History (5)

#1 @justinahinon
6 months ago

I may have found a workaround for this.

So, it seems to me that the versions of Node from 14 onwards are "universal". So you need to install a lower version of Node (branch 12) from a terminal emulated with Rosetta 2. Preferably install this version with NVM.

Then from this terminal, run npm install, and it should work correctly.

#2 follow-up: @desrosj
5 months ago

  • Component changed from External Libraries to Build/Test Tools
  • Keywords reporter-feedback added

Hey @justinahinon,

Do you recall which version of NodeJS you were using when running npm install originally? Core runs on 14.x, so that should be the version you use. As of a few weeks ago, all devDependencies are updated to the latest versions (except Webpack related ones, which are at the highest version that supports the version of Webpack trunk uses).

If you're still having issues and are able to narrow down which packages are problematic, we can look at updating them!

#3 in reply to: ↑ 2 @justinahinon
5 months ago

Replying to desrosj:

Do you recall which version of NodeJS you were using when running npm install originally? Core runs on 14.x, so that should be the version you use. As of a few weeks ago, all devDependencies are updated to the latest versions (except Webpack related ones, which are at the highest version that supports the version of Webpack trunk uses).

I was using Node LTS 14.15

#4 @afragen
5 months ago

@justinahinon node v15.x compiles and installs under arm64 (Apple Silicon). Here's what I did.

nvm is installed via plugin zsh-nvm for oh-my-zsh!

You will need Xcode Command Line Tools installed.
xcode-select --install, may need sudo

  1. Open a terminal session.
  2. Run nvm install 15 and allow it time to compile/build.
  3. Run nvm use 15
  4. Run nvm alias default 15, so every shell session uses this version of node by default

After the above, you can open a new terminal session where wordpress-develop is installed.

  1. export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true , this avoids a current error. https://github.com/puppeteer/puppeteer/issues/6622
  2. npm install, you can also start over by rm -rf node_modules && npm install
  3. npm run build

If you're looking to run the npm run env:xxxx instructions you will need to install version of Docker for Apple Silicon, https://docs.docker.com/docker-for-mac/apple-m1/. Note that this Docker app does not automatically update you must update yourself.

If you want to run the above Docker version you will need to modify the .env to use mariadb as the database using latest version.

Last edited 5 months ago by afragen (previous) (diff)
Note: See TracTickets for help on using tickets.