Cloudflare Developers•7d ago

Pages build failing because Puppeteer won't launch.

I'm trying to inline Critical CSS on my page to get that perfect 100 score [Performance] in Lighthouse. I'm using Astro for my site, and the integration astro-critical-css helps in doing that. Since it uses Puppeteer under the hood to do it, I'm getting this error on deployment:

14:58:27.632    Error: Failed to launch the browser process!
14:58:27.632    /opt/buildhome/repo/node_modules/puppeteer/.local-chromium/linux-722234/chrome-linux/chrome: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory
14:58:27.632    
14:58:27.633    
14:58:27.633    TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md
14:58:27.633    
14:58:27.633        at onClose (/opt/buildhome/repo/node_modules/puppeteer/lib/Launcher.js:750:14)
14:58:27.633        at Interface.<anonymous> (/opt/buildhome/repo/node_modules/puppeteer/lib/Launcher.js:739:50)
14:58:27.633        at Interface.emit (node:events:526:35)
14:58:27.633        at Interface.close (node:internal/readline/interface:533:10)
14:58:27.633        at Socket.onend (node:internal/readline/interface:259:10)
14:58:27.633        at Socket.emit (node:events:526:35)
14:58:27.633        at endReadableNT (node:internal/streams/readable:1359:12)
14:58:27.633        at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
14:58:27.634    
14:58:27.634    Node.js v18.17.1
14:58:27.652    Failed: Error while executing user command. Exited with error code: 1
14:58:27.660    Failed: build command exited with code: 1
14:58:28.418    Failed: error occurred while running build command

14:58:27.632    Error: Failed to launch the browser process!
14:58:27.632    /opt/buildhome/repo/node_modules/puppeteer/.local-chromium/linux-722234/chrome-linux/chrome: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory
14:58:27.632    
14:58:27.633    
14:58:27.633    TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md
14:58:27.633    
14:58:27.633        at onClose (/opt/buildhome/repo/node_modules/puppeteer/lib/Launcher.js:750:14)
14:58:27.633        at Interface.<anonymous> (/opt/buildhome/repo/node_modules/puppeteer/lib/Launcher.js:739:50)
14:58:27.633        at Interface.emit (node:events:526:35)
14:58:27.633        at Interface.close (node:internal/readline/interface:533:10)
14:58:27.633        at Socket.onend (node:internal/readline/interface:259:10)
14:58:27.633        at Socket.emit (node:events:526:35)
14:58:27.633        at endReadableNT (node:internal/streams/readable:1359:12)
14:58:27.633        at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
14:58:27.634    
14:58:27.634    Node.js v18.17.1
14:58:27.652    Failed: Error while executing user command. Exited with error code: 1
14:58:27.660    Failed: build command exited with code: 1
14:58:28.418    Failed: error occurred while running build command

Any idea how to fix it? It didn't work on my Mac locally either. I had to install Rosetta and then it worked.

3 Replies

aravindrajmeOP•7d ago

I can get this done right with a GitHub action—I just need to install the missing dependencies in the runner for this to work. But I'm looking for a Cloudflare approach to solving this problem. For someone who might face this same issue: it's better to run GitHub actions to deploy to Cloudflare pages in this case. I placed a script.sh on the root of the project which conditionally checks for dependencies and installs them if they aren't available on the runner. Then I gave it executable permissions, ran it, built the project files, and used the cloudflare/wrangler-action to deploy to Pages. If anyone from the Cloudflare team could help me find a way to do it with just Cloudflare, I'd be forever grateful. 🥹 Here's the .github/workflows/deploy-to-cloudflare.yaml file in case anyone wants it for reference:

name: Deploy to Cloudflare Pages

on:
  workflow_dispatch

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18

      - name: Set execute permissions for script
        run: chmod +x script.sh

      - name: Run dependency installation script
        run: ./script.sh

      - name: Install project dependencies
        run: npm ci

      - name: Build project
        run: npm run build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy <YOUR_DIST_FOLDER> --project-name=<YOUR_PAGES_PRODUCT_NAME>

name: Deploy to Cloudflare Pages

on:
  workflow_dispatch

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18

      - name: Set execute permissions for script
        run: chmod +x script.sh

      - name: Run dependency installation script
        run: ./script.sh

      - name: Install project dependencies
        run: npm ci

      - name: Build project
        run: npm run build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy <YOUR_DIST_FOLDER> --project-name=<YOUR_PAGES_PRODUCT_NAME>

groenroos•7d ago

Running into the same issue with the same error, albeit with the rollup-plugin-critical package with Vite. Haven't found a workaround or solution yet, and migrating to GHA to get around this seems like an outsize effort in our case. Would appreciate any help! 🙏

aravindrajmeOP•7d ago

Hey, sure. No problem. I'll help as much as I can. Can you answer these questions, so I'll have enough context to help? * What's your environment? * What framework/library are you using? * What is the error you are getting? * Have you tried googling the error and have some pointers/ideas on what to do?

Gaming

Programming

Pages build failing because Puppeteer won't launch.