Slice machine error while taking screenshot

[cnielsen (Chris Nielsen)]

I'm running through the slice machine tutorial.

I've encountered an error while trying to Push Slice to Prismic. The browser simply hangs on this step. Storybook is running and shows the slice as expected.

Console logs are as follows:

> slice-library-starter-next@0.0.0 slicemachine
> start-slicemachine --port 9999

[slice-machine] Launching server

[slice-machine] Now running on http://localhost:9999 !

[slice-machine] (node:11888) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!
/home/cnielsen/projects/prismic/slice-library-starter-next/node_modules/puppeteer/.local-chromium/linux-818858/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/main/docs/troubleshooting.md

    at onClose (/home/cnielsen/projects/prismic/slice-library-starter-next/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:193:20)
    at Interface.<anonymous> (/home/cnielsen/projects/prismic/slice-library-starter-next/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:11888) 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:11888) [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.

I searched the forums and found this post, which I think is related: Slice Machine in Next.js example, using WSL2 (Windows). However, that poster solved the problem by adding @storybook/react to their devDependencies. I don't think that will help me because I already have @storybook/react in my devDependencies.

What should my next steps be?

[Priyanka (Priyanka Maheshwari)]

Hello Chris,

Welcome to the Prismic community and thanks for posting this question to us.

Can you please checkout the Slice Machine troubleshooting guide?

Troubleshooting Slice Machine

Thanks for installing Slice Machine and contributing to the development of this open source project. Currently, Slice Machine is mostly in beta, with Slice Machine in alpha. So, you might encounter some issues. Here are the most common issues and the solutions. This list is up-to-date as of January 12, 2021. Please feel free to suggest additions. First: Check Your Versions The current working versions are here: slice-machine-ui: https://www.npmjs.com/package/slice-machine-ui prismic-cli:…

Let me know if any of those points doesn't solve your issue.

Thanks,
Priyanka

[cnielsen (Chris Nielsen)]

Hello,

Thanks for the response!

The first step suggests to check my versions.

I am using prismic-cli version 3.8.13. The guide states that 3.8.5 is the current working version. I have downgraded my prismic-cli version to match the guide.

I am using slice-machine-ui version 0.0.46. The guide states that 0.0.43 is the current working version. I have downgraded my slice-machine-ui version to match the guide.

I now receive the same error, with some additional errors before it. Here is the new log output:

> slice-library-starter-next@0.0.0 slicemachine /home/cnielsen/projects/prismic/slice-library-starter-next
> start-slicemachine --port 9999

An error occured while migrating file system. Continuing...
Full error: SyntaxError: Unexpected token 'export'
[slice-machine] Launching server

[slice-machine] Now running on http://localhost:9999 !

[slice-machine] (node:2768) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!
/home/cnielsen/projects/prismic/slice-library-starter-next/node_modules/puppeteer/.local-chromium/linux-818858/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/main/docs/troubleshooting.md

    at onClose (/home/cnielsen/projects/prismic/slice-library-starter-next/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:193:20)
    at Interface.<anonymous> (/home/cnielsen/projects/prismic/slice-library-starter-next/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:183:68)
    at Interface.emit (events.js:326:22)
    at Interface.EventEmitter.emit (domain.js:483:12)
    at Interface.close (readline.js:416:8)
    at Socket.onend (readline.js:194:10)
    at Socket.emit (events.js:326:22)
    at Socket.EventEmitter.emit (domain.js:483:12)
    at endReadableNT (_stream_readable.js:1241:12)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)

[slice-machine] (node:2768) 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:2768) [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.

The guide has a section for Error: "Forbidden" which I actually did run into, but I was prompted to login, and login appears to have been successful.

The guide has a section for Error: EOENT, File Not Found, or Preview issue. I am unclear on whether this applies to me. Is a "Preview issue" a problem with screenshots? Probably not, but maybe? The guide suggested downgrading slice-machine-ui to version 0.0.42, which I have now done. I now get a completely different error:

> slice-library-starter-next@0.0.0 slicemachine /home/cnielsen/projects/prismic/slice-library-starter-next
> start-slicemachine --port 9999

[slice-machine] /home/cnielsen/projects/prismic/slice-library-starter-next/node_modules/slice-machine-ui/server/index.js:1
Error: Cannot find module 'express-form-data'
Require stack:
- /home/cnielsen/projects/prismic/slice-library-starter-next/node_modules/slice-machine-ui/server/index.js
    at Object.<anonymous> (/home/cnielsen/projects/prismic/slice-library-starter-next/node_modules/slice-machine-ui/server/index.js:1) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/cnielsen/projects/prismic/slice-library-starter-next/node_modules/slice-machine-ui/server/index.js'
  ]
}

[slice-machine] Thanks for using SliceMachine

The remaining sections, Error: 413, Error: "[slices API]: Not Found", and Error: "Invalid Paths" do not appear to apply to me, so I have skipped them. Please let me know if I should follow those steps anyway.

Under the If all else fails section, I am instructed as follows:

• Reinstall the Primsmic CLI. I have done this as part of downgrading, as instructed earlier in the guide.
• Reauthenticate. I performed these steps this morning.
• Check that my repo name is correct in my config file. I do not know what this means.
• Restart my project from scratch. I assume this one is a joke? I will be happy to restart the tutorial if it helps debugging. Otherwise, please confirm that the suggested step for troubleshooting a production project is "restart from scratch."
• Contact you with the error message and a zip file. That's this thread here. I can provide a zip file. How would you like to receive it?

Thanks!

[Priyanka (Priyanka Maheshwari)]

Hello @cnielsen

Would you please upgrade the version?

I need more information to dig into this issue. Can you please send your repo name and project source code? You can send me a private message too.

Thanks,
Priyanka

[Priyanka (Priyanka Maheshwari)]

Hello @cnielsen

Did you try to upgrade the storybook? If no, please upgrade the storybook with this command: npx sb upgrade.
The new version is @storybook/react v6.3.4

Thanks,
Priyanka