Slice Machine in Next.js example, using WSL2 (Windows)

[ecresdev (Eric Crescioni)]

I'm trying to implement Prismic into our platform, and trying to see if it's viable to use the Slice Machine in production for our marketing page.

However - I'm having a lot of trouble setting it up in our environment (WSL2). As of right now I'm getting this in the console of the "prismic sm --develop" terminal:

[slice-machine] [update]: generating mocks

[slice-machine] [update]: generating screenshot preview

[slice-machine] [update]: checking Storybook url

[slice-machine] [update]: generating screenshot preview

[slice-machine] (node:3969) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!
/home/ecres/personal-dev/ec-slices/node_modules/puppeteer/.local-chromium/linux-818858/chrome-linux/chrome: error while loading shared libraries: libxkbcommon.so.0: cannot open shared object file: No such file or directory


TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md

at onClose (/home/ecres/personal-dev/ec-slices/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:193:20)
at Interface.<anonymous> (/home/ecres/personal-dev/ec-slices/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:183:68)
at Interface.emit (events.js:327:22)
at Interface.EventEmitter.emit (domain.js:467:12)
at Interface.close (readline.js:424:8)
at Socket.onend (readline.js:202:10)
at Socket.emit (events.js:327:22)
at Socket.EventEmitter.emit (domain.js:467:12)
at endReadableNT (internal/streams/readable.js:1327:12)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
(Use `node --trace-warnings ...` to show where the warning was created)

[slice-machine] (node:3969) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:3969) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Any insight?

[ecresdev (Eric Crescioni)]

UPDATE:

I got it to run, it had nothing to do with WSL2. The problem was that prismic sm --setup does not install storybook as a dev dependency. The Prismic Slice Machine NextJS docs imply that it does, but you still have to add:

  "devDependencies": {
"@storybook/react": "^6.2.9", ...}

Also had to add to devDependencies:

  "devDependencies": {
"babel-plugin-react-require": "^3.1.3", ...}

Just putting it out there in case someone is stuck in the same problem.