Gatsby: [gatsby-plugin-preload-fonts] Make puppeteer script compatible with Alpine

[nibtime]

Summary

I installed gatsby-plugin-preload-fonts and tried to start the crawler script. I got some output that looked like this:

Error relocating /workspaces/iacm-site/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: gnu_get_libc_version: symbol not found
Error relocating /workspaces/iacm-site/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: __fdelt_chk: symbol not found
Error relocating /workspaces/iacm-site/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: backtrace: symbol not found
Error relocating /workspaces/iacm-site/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: __strncat_chk: symbol not found
Error relocating /workspaces/iacm-site/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: __fprintf_chk: symbol not found
Error relocating /workspaces/iacm-site/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: __sprintf_chk: symbol not found
Error relocating /workspaces/iacm-site/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: initstate_r: symbol not found
Error relocating /workspaces/iacm-site/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: random_r: symbol not found
Error relocating /workspaces/iacm-site/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: getcontext: symbol not found
Error relocating /workspaces/iacm-site/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: __isinff: symbol not found
Error relocating /workspaces/iacm-site/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: __vfprintf_chk: symbol not found
Error relocating /workspaces/iacm-site/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: __register_atfork: symbol not found
Error relocating /workspaces/iacm-site/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: __longjmp_chk: symbol not found
Error relocating /workspaces/iacm-site/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: __libc_stack_end: symbol not found

I am developing with Gatsby inside a VS Code Remote Container based on Alpine. The problem seems to be, that puppeteer does not download a musl version of Chromium. I've installed Chromium for Alpine though, but puppeteer does not use it.

The problem could be mitigated by making the executablePath of puppeteer.launch a parameter of the script.

Basic example

Puppeteer can be pointed to the correct Chromium path (see here)

To work around the problem, I made the following replacement: in prepare/index.js in the node_modules folder:

  const browser = await puppeteer.launch({
    args: process.argv.slice(2)
  });

const browser = await puppeteer.launch({
    executablePath: '/usr/bin/chromium-browser',
    args: process.argv.slice(2)
  });

Motivation

This would make the plugin usable with Alpine Linux. Also I think this should be documented somehow, even if it is just this issue.

[nibtime]

The following code makes it possible to set executablePath for Chromium when executing the script. Could send a PR if this is desired.

Allows to start script like this:
npm run gatsby-preload-fonts executable-path=/usr/bin/chromium-browser --no-sandbox --headless --disable-gpu

  const processArgs = process.argv.slice(2)
  const isExecutablePathArg = arg => arg.includes("executable-path")
  const executablePathArg = processArgs.find(isExecutablePathArg)
  const [,executablePath] = executablePathArg ? executablePathArg.split("=") : [undefined, undefined]
  const args = processArgs.filter(arg => !isExecutablePathArg(arg))
  const browser = await puppeteer.launch({
    executablePath,
    args
  });

[acao]

hello @nibtime, excellent work, thank you!
a PR for this fix would be great to have

[pieh]

According to those docs: https://pptr.dev/#?product=Puppeteer&version=v1.20.0&show=api-environment-variables you should be able to use PUPPETEER_EXECUTABLE_PATH env var and that wouldn't require any code changes (but could be documented in the README.md if that works)

(docs for [email protected] because that's version we use in the plugin - https://github.com/gatsbyjs/gatsby/blob/73f4c6044805c144df8c40ce8c5e124291795478/packages/gatsby-plugin-preload-fonts/package.json#L20 - in 2.x.x line it also seem supported)

[nibtime]

Thanks @pieh, that works!
A code change is not necessary then.