[slice-machine] - Dockerized Next application unable to take screenshots from Storybook

I've Dockerized my application, but im running into an issue where [slice-machine] is unable to take screenshots from my Storybook components. When I run the application and click on take screenshot, this error pops up:

| [slice-machine] /usr/src/app/node_modules/slice-machine-ui/node_modules/puppeteer/lib/cjs/puppeteer/node/Launcher.js:88
cms_1       |                     throw new Error(missingText);
cms_1       |                           ^
cms_1       | 
cms_1       | Error: Could not find expected browser (chrome) locally. Run `npm install` to download the correct Chromium revision (901912).
cms_1       |     at ChromeLauncher.launch (/usr/src/app/node_modules/slice-machine-ui/node_modules/puppeteer/lib/cjs/puppeteer/node/Launcher.js:88:27)
cms_1       |     at async Object.handleStorybookPreview (/usr/src/app/node_modules/slice-machine-ui/build/server/src/api/common/storybook.js:54:21)
cms_1       |     at async Object.generateForVariation (/usr/src/app/node_modules/slice-machine-ui/build/server/src/api/previews.js:35:28)
cms_1       |     at async Object.generateForSlice (/usr/src/app/node_modules/slice-machine-ui/build/server/src/api/previews.js:18:17)
cms_1       |     at async handler (/usr/src/app/node_modules/slice-machine-ui/build/server/src/api/screenshot.js:10:31)
cms_1       |     at async /usr/src/app/node_modules/slice-machine-ui/build/server/src/api/index.js:59:21

This is the docker file I have:

FROM node:16-slim as base
WORKDIR /usr/src/app

EXPOSE 9999

FROM base as dev

COPY package*.json ./

RUN npm ci

COPY . .

ARG USERID
ARG GROUPID

RUN usermod -u ${USERID} node \
  && groupmod -o -g ${GROUPID} node

CMD ["npm", "run", "slicemachine"]

This is the docker-compose file

services:
  cms:
    image: cms
    build:
      context: .
      dockerfile: ./Dockerfile.cms
      target: dev
      args:
        USERID: ${USERID:-1000}
        GROUPID: ${GROUPID:-1000}
    ports:
      - 9999:9999
    networks:
      - default
    labels:
      - traefik.enable=true
      - traefik.docker.network=<company-name>
      - traefik.http.routers.cms.rule=Host(`dev.cms-<company-name>.nl`)
    volumes:
      - .:/usr/src/app
networks:
  default:
    name: <company-name>
    driver: bridge
    ipam:
      driver: default
      config:
        - subnet: 192.168.238.0/24

Package.json file:

{
  "name": "new",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3333",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "start-slicemachine",
    "storybook": "start-storybook --quiet -p 8888 -s ./public",
    "build-storybook": "build-storybook",
    "eslint": "eslint --ext .tsx --ext .ts src/",
    "prettier": "prettier-eslint $PWD/src/**/*.{ts,tsx} --tab-width 4 --list-different",
    "prettier-fix": "prettier-eslint \"$PWD/src/**/*.{ts,tsx}\" --tab-width 4 --write"
  },
  "dependencies": {
    "@prismicio/client": "^5.1.0",
    "autoprefixer": "^10.4.0",
    "classnames": "^2.3.1",
    "gsap": "^3.8.0",
    "next": "12.0.4",
    "next-slicezone": "^0.1.3",
    "postcss": "^8.3.11",
    "prismic-reactjs": "^1.3.4",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1",
    "remove": "^0.1.5",
    "styled-components": "^5.3.3",
    "tailwindcss": "2.2.4",
    "twin.macro": "^2.8.1"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.12",
    "@storybook/addon-links": "^6.3.12",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/react": "^6.3.12",
    "@types/node": "16.11.7",
    "@types/react": "17.0.35",
    "@types/styled-components": "^5.1.15",
    "babel-loader": "^8.2.2",
    "babel-plugin-react-require": "^3.1.3",
    "eslint": "7",
    "eslint-config-next": "12.0.4",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^7.0.1",
    "prettier": "^2.4.1",
    "prettier-eslint": "^13.0.0",
    "prettier-eslint-cli": "^5.0.1",
    "prop-types": "^15.7.2",
    "puppeteer": "~8.0.0",
    "slice-machine-ui": "^0.1.2",
    "tsconfig-paths-webpack-plugin": "^3.5.2",
    "typescript": "4.4.4"
  },
  "resolutions": {
    "styled-components": "^5"
  }
}

When I do another npm install inside the container and try to take another screenshot the error changes to:

[slice-machine] /usr/src/app/node_modules/slice-machine-ui/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:197
cms_1       |             reject(new Error([
cms_1       |                    ^
cms_1       | 
cms_1       | Error: Failed to launch the browser process!
cms_1       | /usr/src/app/node_modules/slice-machine-ui/node_modules/puppeteer/.local-chromium/linux-901912/chrome-linux/chrome: error while loading shared libraries: libgobject-2.0.so.0: cannot open shared object file: No such file or directory
cms_1       | 
cms_1       | 
cms_1       | TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md
cms_1       | 
cms_1       |     at onClose (/usr/src/app/node_modules/slice-machine-ui/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:197:20)
cms_1       |     at Interface.<anonymous> (/usr/src/app/node_modules/slice-machine-ui/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:187:68)
cms_1       |     at Interface.emit (node:events:402:35)
cms_1       |     at Interface.close (node:readline:586:8)
cms_1       |     at Socket.onend (node:readline:277:10)
cms_1       |     at Socket.emit (node:events:402:35)
cms_1       |     at endReadableNT (node:internal/streams/readable:1343:12)
cms_1       |     at processTicksAndRejections (node:internal/process/task_queues:83:21)

I tried to follow the setup Puppeteer suggest here, however this doesn't seem to resolve the problem.

Does anyone have a working docker setup running with screenshots or do you see what is the issue here?

Thankyou for you time :pray:

Hi @rowin_648

Thanks for reaching out.

I don't have much info about what can cause the issue, but it seems to me like the puppeteer is not able to access some files locally, which can happen due to some missing permissions.

I will keep this thread open in case somebody from the community tried the same or had the same issue.