I successfully installed and used Browsershot, puppeteer and chrome in my Mac M1 homebrew, but stuck with an error in production server, which is running Ubuntu 22.
this is the code I used to generate a dynamic image:
Browsershot::url( url('posts/share-image-preview', $id) )
->windowSize(1080, 1080)
->setIncludePath('$PATH:/usr/bin/npm')
->save('images/share/'.$id.'.png');
return url('images/share/'.$id.'.png');
Problem:
The command "PATH=$PATH:/usr/bin/npm NODE_PATH=`npm root -g` node
'/home/example.com/website/vendor/spatie/browsershot/src/../bin/browser.cjs'
'{"url":"https://example.com/posts/share-image-preview/641","action":"screenshot","options":{"type":"png","path":"images/share/641.png","args":[],
"viewport":{"width":1080,"height":1080}}}'" failed.
Exit Code: 1(General error) Working directory: /home/example.com/website/public
Output: ================ Error Output: ================
Error: Could not find Chrome (ver. 125.0.6422.60). This can occur if either
1. you did not perform an installation before running the script (e.g. `npx puppeteer browsers install chrome`) or
2. your cache path is incorrectly configured (which is: /home/example.com/.cache/puppeteer).
For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration. at ChromeLauncher.resolveExecutablePath (/usr/lib/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js:295:27) at ChromeLauncher.executablePath (/usr/lib/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ChromeLauncher.js:209:25) at ChromeLauncher.computeLaunchArguments (/usr/lib/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ChromeLauncher.js:89:37) at async ChromeLauncher.launch (/usr/lib/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js:70:28) at async callChrome (/home/example.com/website/vendor/spatie/browsershot/bin/browser.cjs:91:23)
Trying to solve this problem, these are the things I did:
- As the error message suggests, I created a writable cache directory.
.cache
- installed
npx puppeteer browsers install chrome
- I checked my npm installation with
whereis npm
and it returns/usr/bin/npm
. So thesetIncludePath
is correct. - The public path
public/images/share/
is writable. - installed puppeteer globally
npm install puppeteer --location=global
Is there something I’m missing?