Running puppeteer gatsby netlify function

Support
,
1

Hi I am trying to use gatsby netlify function with puppeteer but I am running in quite a few issues when my app is deployed to netlify. I’ve found a few topics with the issue but haven’t found the solution for this yet. Hence I am creating this issue.

when I try to trigger the puppeteer function I get this error:

Error when executing function “create-pdf.ts”: “Could not find Chrome (ver. 112.0.5615.121). This can occur if either 1. you did not perform an installation before running the script (e.g. npm install) or 2. your cache path is incorrectly configured (which is: /home/sbx_user1051/.cache/puppeteer). For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.”

here is a minimal reproduction repo

I’ve made a PR with @sparticuz/chromium and suggested fixes but then I get this erorr:

Error when executing function “create-pdf.ts”: “The input directory “/var/task/.cache/bin” does not exist.”

I tried creating the same function in netlify/functions/test.js to see if that could fix it but then I am getting

ERROR Uncaught Exception {“errorType”:“Runtime.ImportModuleError”,“errorMessage”:“Error: Cannot find module ‘@sparticuz/chromium’\nRequire stack:\n- /var/task/netlify/functions/test.js\n- /var/task/test.js\n- /var/runtime/index.mjs”,“stack”:[“Runtime.ImportModuleError: Error: Cannot find module ‘@sparticuz/chromium’”,“Require stack:”,“- /var/task/netlify/functions/test.js”,“- /var/task/test.js”,“- /var/runtime/index.mjs”," at _loadUserApp (file:///var/runtime/index.mjs:997:17)“,” at async Object.UserFunction.js.module.exports.load (file:///var/runtime/index.mjs:1032:21)“,” at async start (file:///var/runtime/index.mjs:1195:23)“,” at async file:///var/runtime/index.mjs:1201:1"]}

Obviously I would love to have my puppeteer functions in my src/api folder but as a workaround they could be in the netlify/functions folder if it worked

I tried with chrome-aws-lambda without success it’s failing on the build step with error

Failed to validate error [Error [ValidationError]: “error” must be of type object]

2

I am also trying to implement a puppeteer function using netlify and am experiencing the same issue. I’ve cloned @kdichev repo and tested his branches and can confirm that it’s not working. Would love to find a solution too.

3

I’ve made a issue in sparticuz/chromium repo and @Sparticuz confirmed my findings that the function can’t find where the bin folder with chromium.br is located.

That error means that your bin folder, with the chromium.br file, is somewhere else. I’ve not used netlify, so I’m unsure how the file system looks. Other packaging systems require something like externalDependencies: “@sparticuz/chromium” or something similar so it knows to keep this package.

Would it be possible for somebody to check the file system and let me know the path? I could allow admin to take a look at my netlify deployment if needed.

Thanks a lot!

4

I tried with @sparticuz/chromium-min and I am getting a different error:

Error: Failed to launch the browser process!
/tmp/chromium: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory

changed the node runtime to 18 without change

5

ok so I probably managed to find the place for chromium.br file is by checking netlify docs for external node modules, i had to update netlify.toml like so:

[[plugins]]
    package = "@netlify/plugin-gatsby"
[functions]
    node_bundler = "esbuild"
    external_node_modules = ["@sparticuz/chromium"]

had to add node_bundler to esbuild as stated by netlify docs in order to use external_node_modules
then needed to update the code with the proper path to the file

  const browser = await puppeteer.launch({
    args: chromium.args,
    defaultViewport: chromium.defaultViewport,
    executablePath: await chromium.executablePath(
      "/var/task/node_modules/@sparticuz/chromium/bin"
    ),
    headless: chromium.headless,
  });

correct path is /var/task/node_modules/@sparticuz/chromium/bin

although this beringed me closer to the solution I still got an error:

Error when executing function "create-pdf.ts": "Failed to launch the browser process!
/tmp/chromium: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory

which is the same as using @sparticuz/chromium-min with the url https://github.com/Sparticuz/chromium/releases/download/v113.0.0/chromium-v113.0.0-pack.tar

so I guess this is working but still have issue with the libnss3.so

wondering now what’s the next step heh

7

Hi @kdichev,

I’ve responded to this in the helpdesk. Please follow-up and continue the conversation on a single channel for streamlined communication.