Make WordPress Core

Opened 12 months ago

Last modified 8 weeks 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 (7)

#1 @justinahinon
12 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
11 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
11 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
11 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 11 months ago by afragen (previous) (diff)

#6 @talldanwp
8 weeks ago

I've also encountered this after getting a new laptop, but a curious thing is that there's no such problem in the Gutenberg project.

For some background, Gutenberg only uses the puppeteer-core package. That package doesn't install Chromium when running npm install, instead chromium is installed when running the test command:
https://github.com/WordPress/gutenberg/blob/trunk/packages/scripts/scripts/test-e2e.js#L31-L33

This is distinct from the puppeteer package, which installs chromium whenever running npm install (which can be a frustrating waste of time).

My first thought was that perhaps core should also use puppeteer-core, but then I was surprised to find it already does. It uses the same tooling as Gutenberg.

Looking into the dependencies a bit further, it looks like the issue is that the grunt-contrib-qunit package has puppeteer as a dependency, and an old version at that. This is what's causing the issue. Versions of puppeteer are locked to specific chromium versions, so it's likely that the version of chromium that project depends on doesn't support the M1.

IMO, any fix should be made upstream to grunt-contrib-qunit, or perhaps WordPress should look into an alternative to that project that doesn't cause chromium to be installed when running npm install.

As a workaround you can set the PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true environment variable, which allows npm install to finish, but running tests won't work. Technically you should be able to install chromium independently (brew install chromium) and also set PUPPETEER_EXECUTABLE_PATH, but I haven't been able to get that working.

edit: actually, I do know the reason for the last thing I mentioned. e2e tests are using puppeteer-core and that doesn't support the environment variables!

Last edited 8 weeks ago by talldanwp (previous) (diff)

#7 @antonvlasenko
8 weeks ago

Solution that worked for me when I got my M1 Mac a couple of months ago:

  1. brew install chromium
  2. Go to ~/.zshrc file and add the following lines:
    export PUPPETEER_EXECUTABLE_PATH=`which chromium`
    export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
    export PATH="/opt/homebrew/opt/node@14/bin:$PATH"
    

/opt/homebrew/opt/node@14/binpath must match the actual node version installed on your Mac).

  1. Log out of your user account and log in again.
  2. Try to install and/or build Gutenberg.
Last edited 8 weeks ago by antonvlasenko (previous) (diff)
Note: See TracTickets for help on using tickets.