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 