Libnss3.so missing in Node 22.x

Help
1

I am trying to use the npm package critical (critical - npm).
It uses headless chromium through puppeteer. It used to work in node 14.x, but with node 22.x the following error raises:

   Error: Failed to launch the browser process!
   /vercel/path0/node_modules/puppeteer/.local-chromium/linux-722234/chrome-linux/chrome: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory
   TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md

The following cli script is the one raising the error:

#!/bin/bash
echo "Starting critical-css"
./node_modules/critical/cli.js public/index.html --base public > ./assets/css/critical.css
echo "Done running critical-css"

Project URL: GitHub - zetxek/adrianmoreno.info: Static website generated with hugo CMS, hosted in vercel

Is there any way to install the missing dependency? Has someone been able to run chromium in node 22.x in the build step?

2

Hi, @zetxek! Welcome to the Vercel Community :smile:

The most reliable solution would probably be to generate the critical CSS either locally or in a GitHub Action, where you have more control over the environment and can install the required system dependencies. This would avoid the limitations of the serverless environment while still allowing you to use Node.js 22 and the critical package. For example:

Run critical CSS generation locally:

# Local script
npm run critical-css
git add assets/css/critical.css
git commit -m "Update critical CSS"

Use GitHub Actions:

name: Generate Critical CSS
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '22'
      - run: npm install
      - run: npm run critical-css
      - name: Commit changes
        uses: EndBug/add-and-commit@v7
        with:
          message: 'Update critical CSS'
          add: 'assets/css/critical.css'

Let us know how you get on!

3 Likes
3

This can work - I’ll give it a try to the GitHub actions!

2 Likes
4

and coming back to say that it worked nicely :slight_smile:
I edited the idea a bit, but the inspiration was perfect: adrianmoreno.info/.github/workflows/generate-critical-css.yml at main · zetxek/adrianmoreno.info · GitHub

2 Likes
5

Perfect! Thanks for coming back and sharing that it worked.

Here if you have any more questions! :smile:

6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.