Puppeteer, Headless Chrome and CircleCI

In this post, I wanted to cover an issue I dealt with while updating an older repo. In this case, I was working on getting it to work on CircleCi version 2. More specifically, a migration from “karma-phantomjs-launcher”: “1.0.4” to “karma-chrome-launcher”: “3.1.0”.

Photo by Christina @ wocintechchat.com on Unsplash

This involved updated karma from 1.5.0 to 6.3.4 and karma-webpack from 2.0.3 to 5.0.0 and adding puppeteer 10.1.0.

Everything seemed fine on my local windows environment, but when pushing to my remote GitHub repo, more issues arose, resulting in me needing to:

Update the docker image from node:7.10 up to node:14.1.

And then updating my node-sass from 4.12.0 to 6.0.1 which supports node v14 (though my local is v12.16.2).

And just when I thought I was safe I was met with several errors right after Webpack compiled, the first of which was:

08 07 2021 17:17:42.889:ERROR [launcher]: Cannot start ChromeHeadless
/home/circleci/repo/node_modules/puppeteer/.local-chromium/linux-884014/chrome-linux/chrome: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory

The Fix:

Adding this line right after my npm install command in my CircleCI config.

run: sudo apt-get install gconf-service libasound2 libatk1.0–0 libc6 libcairo2 libcups2 libdbus-1–3 libexpat1 libfontconfig1 libgbm-dev libgcc1 libgconf-2–4 libgdk-pixbuf2.0–0 libglib2.0–0 libgtk-3–0 libnspr4 libpango-1.0–0 libpangocairo-1.0–0 libstdc++6 libx11–6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

The Fix Explained:

After a bit of googling, I learned that while npm install on windows will install puppeteers dependencies listed above, the CircleCi project was running on linux and required an additional step to get things going. Hoping this helps whoever may come up against this issue.

Bonus:

While you may not encounter this, I found that Webpack’s minified files gave me issues during the build and test step in my CircleCi project, so adding a condition to my tests that stopped minification seemed to work nicely.