Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

M1 Macでpuppeteerを動かす方法(2020年12月21日時点)

動作環境

Mac Book Air 2020 M1
macOS Big Sur 11.0

エラー内容

ヘッドレス Chrome Node API 「Puppeteer」 - Qiitaを参考にpuppeteerを動かしてみようとした時に下記コマンドが arm64ではエラーが出たのでその対処方法を書きます。

yarn add puppeteer
buzzword111@buzzword111-MacBook-Air Puppeteer % yarn add puppeteer
yarn add v1.22.10
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
error /.../Puppeteer/node_modules/puppeteer: Command failed.
Exit code: 1
Command: node install.js
Arguments: 
Directory: /.../Puppeteer/node_modules/puppeteer
Output:
The chromium binary is not available for arm64: 
If you are on Ubuntu, you can install with: 

 apt-get install chromium-browser

/.../Puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:112
            throw new Error();
            ^

Error
    at /.../Puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:112:19
    at FSReqCallback.oncomplete (node:fs:199:21)
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

puppeteerを動かす方法

1.ARM64版のGoogle Chromeをインストールする。

image.png
インストールするGoogle Chromeの実行ファイルは下記に配置されます。
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome

2.puppeteerの代わりにpuppeteer-coreをyarn addする。

yarn add puppeteer-core
buzzword111@buzzword111-MacBook-Air Puppeteer % yarn add puppeteer-core
yarn add v1.22.10
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 51 new dependencies.
...

3.puppeter 5.5.0時点ではまだM1 Macに対応していないのでパッチを手動であてる。

// node_modules/puppeteer-core/lib/cjs/puppeteer/node/Launcher.js L:73
if (os.arch() === 'arm64' && false) { // ← && falseを追記
    chromeExecutable = '/usr/bin/chromium-browser';
}

image.png
https://github.com/puppeteer/puppeteer/issues/6641#issuecomment-748965065

このパッチを適用しないと、Google Chromeの実行パス(executablePath)が固定で /usr/bin/chromium-browserで上書きされてしまう。

4.動作確認

const puppeteer = require('puppeteer-core');

(async () => {
  const browser = await puppeteer.launch({
    executablePath:
      '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
  })
  const page = await browser.newPage()
  await page.goto('https://example.com')
  await page.screenshot({ path: 'example.png' })

  await browser.close()
})()

image.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?