Railway•2y ago

Puppeteer Deployment Issue

PUPPETEER DEPLOYMENT ISSUES -- I've seen a lot of chatter around various issues deploying Puppeteer, but nothing jumps out as a complete answer or example for deployment of the current versions. I'm seeing the deployment errors, below after setup in .puppeteerrc.cjs. I also tried nixpacks.toml described in various places but have since removed it after looking at a railway PR. NOTE: We are using Puppeteer for internal URL screenshot / image generation as it's proven most reliable for our requirement.

// .puppeteerrc.cjs
const { join } = require('path');

/**
 * @type {import("puppeteer").Configuration}
 */
module.exports = {
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
};

// .puppeteerrc.cjs
const { join } = require('path');

/**
 * @type {import("puppeteer").Configuration}
 */
module.exports = {
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
};

ERRORS:

#13 13.02 file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:278
#13 13.02                     throw new Error(`Could not find Chrome (ver. ${this.puppeteer.browserRevision}). This can occur if either\n` +
#13 13.02                           ^
#13 13.02
#13 13.02 Error: Could not find Chrome (ver. 114.0.5735.133). This can occur if either
#13 13.02  1. you did not perform an installation before running the script (e.g. `npm install`) or
#13 13.02  2. your cache path is incorrectly configured (which is: /app/.cache/puppeteer).
#13 13.02 For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.
#13 13.02     at ChromeLauncher.resolveExecutablePath (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:278:27)
#13 13.02     at ChromeLauncher.executablePath (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:174:25)
#13 13.02     at ChromeLauncher.computeLaunchArguments (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:91:37)
#13 13.02     at async ChromeLauncher.launch (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:57:28)
#13 13.02
#13 13.02 Node.js v18.12.1
#13 13.02
#13 13.03  ELIFECYCLE  Command failed with exit code 1.
 
#13 ERROR: process "/bin/bash -ol pipefail -c pnpm build" did not complete successfully: exit code: 1
-----
> [stage-0  9/11] RUN --mount=type=cache,id=s/d2f8a6b1-6a3d-46dc-9755-43c359214c26-node_modules/cache,target=/app/node_modules/.cache pnpm build:
#13 13.02  2. your cache path is incorrectly configured (which is: /app/.cache/puppeteer).
#13 13.02 For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.
#13 13.02     at ChromeLauncher.resolveExecutablePath (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:278:27)
#13 13.02     at ChromeLauncher.executablePath (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:174:25)
#13 13.02     at ChromeLauncher.computeLaunchArguments (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:91:37)
#13 13.02     at async ChromeLauncher.launch (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:57:28)
#13 13.02

#13 13.02 file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:278
#13 13.02                     throw new Error(`Could not find Chrome (ver. ${this.puppeteer.browserRevision}). This can occur if either\n` +
#13 13.02                           ^
#13 13.02
#13 13.02 Error: Could not find Chrome (ver. 114.0.5735.133). This can occur if either
#13 13.02  1. you did not perform an installation before running the script (e.g. `npm install`) or
#13 13.02  2. your cache path is incorrectly configured (which is: /app/.cache/puppeteer).
#13 13.02 For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.
#13 13.02     at ChromeLauncher.resolveExecutablePath (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:278:27)
#13 13.02     at ChromeLauncher.executablePath (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:174:25)
#13 13.02     at ChromeLauncher.computeLaunchArguments (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:91:37)
#13 13.02     at async ChromeLauncher.launch (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:57:28)
#13 13.02
#13 13.02 Node.js v18.12.1
#13 13.02
#13 13.03  ELIFECYCLE  Command failed with exit code 1.
 
#13 ERROR: process "/bin/bash -ol pipefail -c pnpm build" did not complete successfully: exit code: 1
-----
> [stage-0  9/11] RUN --mount=type=cache,id=s/d2f8a6b1-6a3d-46dc-9755-43c359214c26-node_modules/cache,target=/app/node_modules/.cache pnpm build:
#13 13.02  2. your cache path is incorrectly configured (which is: /app/.cache/puppeteer).
#13 13.02 For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.
#13 13.02     at ChromeLauncher.resolveExecutablePath (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:278:27)
#13 13.02     at ChromeLauncher.executablePath (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:174:25)
#13 13.02     at ChromeLauncher.computeLaunchArguments (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:91:37)
#13 13.02     at async ChromeLauncher.launch (file:///app/node_modules/.pnpm/[email protected][email protected]/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:57:28)
#13 13.02

@Mafdet Did you ever get your deployment issue solved? If so, any guidance here?

44 Replies

Percy•2y ago

Project ID: d2f8a6b1-6a3d-46dc-9755-43c359214c26

Brody•2y ago

can you send your package.json?

sebastian®OP•2y ago

Hi @brody192. The files look like this: PACKAGE:

{
    "name": "foobar",
    "description": "foobar",
    "engines": {
        "node": ">=18.0.0"
    },
    "private": true,
    "scripts": {
        "build": "qwik build",
        "build.client": "vite build",
        "build.cron_jobs": "cd cron_jobs && tsc",
        "build.preview": "vite build --ssr src/entry.preview.tsx",
        "build.server": "vite build -c adapters/fastify/vite.config.ts",
        "build.types": "tsc --incremental --noEmit",
        "deploy.cron_jobs": "node cron_jobs/build/cron_jobs/index.js",
        "dev": "vite --mode ssr",
        "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
        "fmt": "prettier --write .",
        "fmt.check": "prettier --check .",
        "lint": "eslint \"src/**/*.ts*\"",
        "preview": "qwik build preview && vite preview --open",
        "serve": "node server/entry.fastify",
        "start": "vite --open --mode ssr",
        "test": "vitest",
        "test.unit": "vitest components",
        "test.unit.ui": "vitest --ui components",
        "typegen": "kysely-codegen --include-pattern \"public.*\" --dialect postgres --out-file src/database/dbTypes_autogenerated.ts && prettier --write src/database/dbTypes_autogenerated.ts",
        "qwik": "qwik"
    },
    "devDependencies": {
        "@builder.io/qwik": "github:builderio/qwik-build",
        "@builder.io/qwik-city": "github:builderio/qwik-city-build",
        "@builder.io/qwik-dom": "^2.1.19",
        "@builder.io/sdk-qwik": "^0.4.1",
        "@fastify/compress": "^6.4.0",
        "@fastify/static": "^6.10.2",
        "@resvg/resvg-js": "^2.4.1",
        "@types/chai": "^4.3.5",
        "@types/compression": "^1.7.2",
        "@types/eslint": "8.40.2",
        "@types/express": "4.17.17",
        "@types/jsonwebtoken": "^9.0.2",
        "@types/node": "^20.3.1",
        "@types/node-cron": "^3.0.7",
        "@types/node-fetch": "^2.6.4",
        "@types/pg": "^8.10.2",
        "@types/ua-parser-js": "^0.7.36",
        "@typescript-eslint/eslint-plugin": "5.59.11",
        "@typescript-eslint/parser": "5.59.11",
        "@vercel/og": "^0.5.7",
        "@vitest/ui": "^0.32.2",
        "better-sqlite3": "^8.4.0",
        "chai": "^4.3.7",
        "compression": "^1.7.4",
        "date-fns": "^2.30.0",
        "dotenv": "^16.3.1",
        "eslint": "8.43.0",
        "eslint-plugin-qwik": "1.1.5",
        "express": "4.18.2",
        "fastify": "^4.18.0",
        "fastify-plugin": "^4.5.0",
        "http-status-codes": "^2.2.0",
        "jsonwebtoken": "^9.0.0",
        "kysely": "^0.25.0",
        "kysely-codegen": "^0.10.1",
        "node-fetch": "3.3.1",
        "openai": "^3.3.0",
        "pg": "8.11.0",
        "prettier": "2.8.8",
        "rollup-plugin-analyzer": "^4.0.0",
        "rollup-plugin-visualizer": "^5.9.2",
        "satori": "^0.10.1",
        "tslog": "^4.8.2",
        "typescript": "5.1.3",
        "ua-parser-js": "^1.0.35",
        "undici": "5.22.1",
        "vite": "^4.3.9",
        "vite-tsconfig-paths": "4.2.0",
        "vitest": "^0.32.2",
        "zod": "^3.21.4"
    },
    "dependencies": {
        "cron-parser": "^4.8.1",
        "node-cron": "^3.0.2",
        "puppeteer": "^20.7.2"
    }
}

{
    "name": "foobar",
    "description": "foobar",
    "engines": {
        "node": ">=18.0.0"
    },
    "private": true,
    "scripts": {
        "build": "qwik build",
        "build.client": "vite build",
        "build.cron_jobs": "cd cron_jobs && tsc",
        "build.preview": "vite build --ssr src/entry.preview.tsx",
        "build.server": "vite build -c adapters/fastify/vite.config.ts",
        "build.types": "tsc --incremental --noEmit",
        "deploy.cron_jobs": "node cron_jobs/build/cron_jobs/index.js",
        "dev": "vite --mode ssr",
        "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
        "fmt": "prettier --write .",
        "fmt.check": "prettier --check .",
        "lint": "eslint \"src/**/*.ts*\"",
        "preview": "qwik build preview && vite preview --open",
        "serve": "node server/entry.fastify",
        "start": "vite --open --mode ssr",
        "test": "vitest",
        "test.unit": "vitest components",
        "test.unit.ui": "vitest --ui components",
        "typegen": "kysely-codegen --include-pattern \"public.*\" --dialect postgres --out-file src/database/dbTypes_autogenerated.ts && prettier --write src/database/dbTypes_autogenerated.ts",
        "qwik": "qwik"
    },
    "devDependencies": {
        "@builder.io/qwik": "github:builderio/qwik-build",
        "@builder.io/qwik-city": "github:builderio/qwik-city-build",
        "@builder.io/qwik-dom": "^2.1.19",
        "@builder.io/sdk-qwik": "^0.4.1",
        "@fastify/compress": "^6.4.0",
        "@fastify/static": "^6.10.2",
        "@resvg/resvg-js": "^2.4.1",
        "@types/chai": "^4.3.5",
        "@types/compression": "^1.7.2",
        "@types/eslint": "8.40.2",
        "@types/express": "4.17.17",
        "@types/jsonwebtoken": "^9.0.2",
        "@types/node": "^20.3.1",
        "@types/node-cron": "^3.0.7",
        "@types/node-fetch": "^2.6.4",
        "@types/pg": "^8.10.2",
        "@types/ua-parser-js": "^0.7.36",
        "@typescript-eslint/eslint-plugin": "5.59.11",
        "@typescript-eslint/parser": "5.59.11",
        "@vercel/og": "^0.5.7",
        "@vitest/ui": "^0.32.2",
        "better-sqlite3": "^8.4.0",
        "chai": "^4.3.7",
        "compression": "^1.7.4",
        "date-fns": "^2.30.0",
        "dotenv": "^16.3.1",
        "eslint": "8.43.0",
        "eslint-plugin-qwik": "1.1.5",
        "express": "4.18.2",
        "fastify": "^4.18.0",
        "fastify-plugin": "^4.5.0",
        "http-status-codes": "^2.2.0",
        "jsonwebtoken": "^9.0.0",
        "kysely": "^0.25.0",
        "kysely-codegen": "^0.10.1",
        "node-fetch": "3.3.1",
        "openai": "^3.3.0",
        "pg": "8.11.0",
        "prettier": "2.8.8",
        "rollup-plugin-analyzer": "^4.0.0",
        "rollup-plugin-visualizer": "^5.9.2",
        "satori": "^0.10.1",
        "tslog": "^4.8.2",
        "typescript": "5.1.3",
        "ua-parser-js": "^1.0.35",
        "undici": "5.22.1",
        "vite": "^4.3.9",
        "vite-tsconfig-paths": "4.2.0",
        "vitest": "^0.32.2",
        "zod": "^3.21.4"
    },
    "dependencies": {
        "cron-parser": "^4.8.1",
        "node-cron": "^3.0.2",
        "puppeteer": "^20.7.2"
    }
}

USAGE:

import puppeteer from 'puppeteer';

...

    pagePromise = puppeteer
        .launch({
            headless: 'new',
            args: ['--no-sandbox', '--disable-setuid-sandbox'],
        })
        .then((browser) => {
            console.log('Browser launched');
            return browser.newPage();
        });

import puppeteer from 'puppeteer';

...

    pagePromise = puppeteer
        .launch({
            headless: 'new',
            args: ['--no-sandbox', '--disable-setuid-sandbox'],
        })
        .then((browser) => {
            console.log('Browser launched');
            return browser.newPage();
        });

Brody•2y ago

what is this file for?

// .puppeteerrc.cjs
const { join } = require('path');

/**
 * @type {import("puppeteer").Configuration}
 */
module.exports = {
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
};

// .puppeteerrc.cjs
const { join } = require('path');

/**
 * @type {import("puppeteer").Configuration}
 */
module.exports = {
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
};

sebastian®OP•2y ago

https://pptr.dev/guides/configuration

Configuration | Puppeteer

All defaults in Puppeteer can be customized in two ways:

sebastian®OP•2y ago

As it's unclear where Railway needs to store the browser (e.g. ~/.cache/puppeteer), this resolves. that.

Brody•2y ago

see what happens when you delete that file

sebastian®OP•2y ago

same issue it's unclear in Railway where this should point. There's a whole bunch of different posts around this, and also references for Railway based on Heroku nixpacks. But there's a Railway PR that seems to fix it, so I removed the nixpack.

Brody•2y ago

show me the pr?

sebastian®OP•2y ago

oh, boy ..... that's hours ago...... let me see....

sebastian®OP•2y ago

This one: https://github.com/railwayapp/nixpacks/pull/416

GitHub

Support Puppeteer out of the box by JakeCooper · Pull Request #416 ...

This PR adds support for Puppeteer detection

sebastian®OP•2y ago

Interestingly, as a test, I was just able to successfully deploy Playwright which also uses a headless browser. There is something about the caching of the browser in Puppeteer that is not right -- at least that's my suspicion.

Brody•2y ago

okay fine, I'll ask, why do you have 99% of your dependencies as dev dependencies

sebastian®OP•2y ago

That's how Qwik is designed. Highly optimized for JIT execution, "Resumability" model. It's like streamed Typescript.

Brody•2y ago

but a lot of those are definitely not dependencies that are only used during development

sebastian®OP•2y ago

True, the optmization process of Qwik resolves this when it build the produciton version.

sebastian®OP•2y ago

https://qwik.builder.io https://github.com/BuilderIO/qwik

Qwik

Framework reimagined for the edge! - Qwik

No hydration, auto lazy-loading, edge-optimized, and fun 🎉!

GitHub

GitHub - BuilderIO/qwik: Instant-loading web apps, without effort

Instant-loading web apps, without effort. Contribute to BuilderIO/qwik development by creating an account on GitHub.

sebastian®OP•2y ago

We have production-grade Qwik apps running quite successfully on Railway.

Brody•2y ago

the puppeteer dependency is supposed to install chrome, any idea why it isn't? I think I should mention, I'm not a JavaScript developer

sebastian®OP•2y ago

That's exactly what a couple of us are digging around for today. Why it's not.... and the current suspicion is the cache path. I'm going to ping someone in the morning and get their opinion too.

Brody•2y ago

I've seen people use puppeteer without issues, without any configuration

sebastian®OP•2y ago

I'd just like to see a current (working) example of Puppeteer on Railway using the current versions.

Brody•2y ago

they've never touched the cache directory

sebastian®OP•2y ago

Indeed. I've also seen some comments that people have rolled back to an old version of Puppeterr on Railway. If you recall anybody, or know of a working example with current releases, please let me know. I can reverse engineer from there.

Brody•2y ago

ill throw my puppeteer test app on railway right now

sebastian®OP•2y ago

pnpm up --latest

Brody•2y ago

what

sebastian®OP•2y ago

Puppeteer v20.7.2

Brody•2y ago

my test is using 19.7.1 i will try that, then i will update

sebastian®OP•2y ago

19 should be after their transision ... interesting yeah, please throw it up. and if you have a working repo, please share it, plus any configs for Railway (e.g. essential env vars for any paths if required).

Brody•2y ago

no configs should be needed, but i am throwing it up

Brody•2y ago

good start

Brody•2y ago

no issues with 20.7.2

sebastian®OP•2y ago

That's good news. Can you share the repo?

Brody•2y ago

dont have a repo i give zip

sebastian®OP•2y ago

sure, that works.

Brody•2y ago

pup.7z

Brody•2y ago

7z close enough

sebastian®OP•2y ago

got it -- simple simple simple. thank you. let me look at this tomorrow and try to triangulate what's going on with my deployment not finding chrome. Thank you @brody192! 🙏

Brody•2y ago

sounds good, i blame pnpm

sebastian®OP•2y ago

Hahahaha.... maybe! vite

Brody•2y ago

nothing ever good comes from going against the grain

sebastian®OP•2y ago

or one of many other popcicle sticks and bubble gum holding the digital world together. I've moved over to PlayWright for snapshots and it's working perfectly. I did have to add a "postinstall": "npx playwright install" script to resolve the missing chromium browser. It could be the case that Puppeteer requires a similar but different postinstall step. Thanks for your help @brody192. I am marking this solved, but if anybody else wishes to continue the puppeteer deployment conversation, please feel free.

Brody•2y ago

glad you've solved it, super odd why puppeteer wasn't installing chrome for you but was for me

Gaming

Programming

Puppeteer Deployment Issue