I can't upload screenshot previews via storybook to prismic any more

Developing with Prismic
1

I get this error

[slice-machine] [update]: checking Storybook url
[update]: generating screenshot preview

[slice-machine] [update]: Model was saved but screenshot could not be generated.

[slice-machine] (node:44440) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open 'C:\projects\vfi-website.slicemachine\assets\slices\SubscribeEbook\preview.png'
at Object.openSync (fs.js:462:3)
at Object.readFileSync (fs.js:364:35)
at Proxy.base64Sync (C:\projects\vfi-website\node_modules\base64-img\base64-img.js:60:17)
at handler (C:\projects\vfi-website\node_modules\slice-machine-ui\server\api/update.js:74:57)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at C:\projects\vfi-website\node_modules\slice-machine-ui\server\api/index.js:36:19

[slice-machine] (node:44440) 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 Command-line API | Node.js v18.9.1 Documentation). (rejection id: 3)

It worked a few weeks ago

"prismic-cli": "^3.8.4",
"slice-machine-ui": "^0.0.45",
5

Hi there,

Thanks for reaching out, I'm currently investigating this issue with the Slice Machine team, and I will let you know once I have any updates,

Fares

6

We are still investigating the issue, and we need some more info.

It would be helpful if you could share with us the exact "slice-machine-ui" version from your package.lock file? And better to share the whole package.lock file in a private message if needed.

7

Thanks @Fares I DM'd you with our entire yarn.lock file (we use yarn not npm). Here's the slice machine bit now as well

slice-machine-ui@^0.0.45:
  version "0.0.45"
  resolved "https://registry.yarnpkg.com/slice-machine-ui/-/slice-machine-ui-0.0.45.tgz#d6748cfbb5aefb420ff4e305940a805017654c0d"
  integrity sha512-d+VnflPeU/KzANPMar0c+PA+FKn5BPMjcuPBEo30/ISGvhUN4wP0MT+eYwg8ULMx9kEUbNZMrB8il4RMhOTM/g==
  dependencies:
    "@babel/register" "^7.11.5"
    "@reach/menu-button" "^0.10.5"
    "@svgr/webpack" "^5.4.0"
    "@theme-ui/color" "^0.3.1"
    "@theme-ui/prism" "^0.3.4"
    atob "^2.1.2"
    babel-plugin-module-resolver "^4.0.0"
    babel-plugin-prismjs "^2.0.1"
    base64-img "^1.0.4"
    body-parser "^1.19.0"
    deepmerge "^4.2.2"
    esm "^3.2.25"
    express "^4.17.1"
    express-form-data "^2.0.14"
    faker "^5.1.0"
    fast-deep-equal "^3.1.3"
    form-data "^3.0.0"
    formdata-node "^2.4.0"
    glob "^7.1.6"
    lorem-ipsum "^2.0.3"
    mime "^2.4.6"
    multer "^1.4.2"
    oembed-parser "^1.4.5"
    parse-domain "^3.0.2"
    prompts "^2.4.0"
    puppeteer "^5.0.0"
    random-sentence "^1.0.4"
    semver "^7.3.2"
    serve-static "^1.14.1"
    slash "3.0.0"
    sm-commons "^0.0.22"
    uniqid "^5.2.0"
    yargs "^16.0.3"
    yup "^0.29.1"
1 Like
8

Thanks, I have forward this to our dev team, and I will let you know once I get more info.

9

Hi,

I've got some feedback from our dev team, and apparently, slice-machine-ui dependency is out of date.

can you please do :

  • npm update slice-machine-ui
  • npm update prismic-cli
10

Thank you @Fares some good and some bad news...

The good news... I followed your instructions and I can upload custom screenshots again. For others reading this, the new version of slicemachine requires node v15 installed. I had to upgrade. This requires the "current" version of node, not the "LTS" version, which is the default download.

The bad news... Storybook runs but now it doesn't find any of my components at all. Before the upgrade it was working. I am on v 6.3.12

image
image2880×1494 137 KB

11

@Fares Is it essential that slice-machine-ui needs node 15+ because this is not a LTS version, it is causing me some headaches on my build server.

12

ok, I'm checking with the Slice Machine team and I will get back to you once I get some info.

13

Hello @Fares
Could you give @withloveinternet and @ariel a quick update about this today, please?

Thanks a lot for your help.

1 Like
14

I'm still investigating, but our dev team referred that this can be a potential solution for the fact the at you can your components.

15

Hi, @withloveinternet. Have you managed to fix this issue, or should we try to dig deeper?

16

Thanks @Fares for investigating and for the workaround you provided. I have found a way to make the latest node version required by slice-machine play nice with my build server, so I don't need to use the workaround.

1 Like
17

Thanks, @withloveinternet, for letting us know. It would be great if you could explain how to make the latest node version required by slice-machine play nice with your build server for the benefit of the community.

18

@Fares sure!

I use vercel to build my apps, and although you can set the nodejs version used by the build server in settings -they only support 12.x and the LTS (14.x) not the 15 required by slicemachine. I was worried at first, but It seems to build ok even so as Node 15 is only required when running yarn slicemachine locally. People using vercel to build their production apps that use the latest slicemachine should be fine, as long as they can install node 15+ locally to run slicemachine.

The problem came because I want to run local builds of my production app using the same version of node as on the vercel server, so I needed a safe way to switch between node 14 and 15 at will. This isn't supported by node by default. For OSX users the tool to use is NVM (node version manager). I use windows mostly so the best tool to use to switch between node versions is not the original nvm but nvm-windows

For other windows users, watch out for this gotcha when installing nvm-windows. It first gets you to uninstall all node versions on your machine, before installing various node versions via its own cli. Which will also uninstall your windows-build-tools which are required. The only safe way to get the build tools these days is to use the actual node installer. The workflow that eventually worked for me was this:

  1. uninstall all node versions as per nvm instructions
  2. install nvm-windows with cli including the version(s) you want
  3. Then re-run the installer from the node website, this will install the build tools along with the node version. Even though you use the installer to install a specific node version, nvm will still let you switch, but only if you do things in this order

Cheers!

1 Like
19

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.