Custom Screenshots for Slices are not working

Developing with Prismic
1

Is this something that will be added in the future? I used the button to add custom screenshots to my Slices but whenever I go to Prismic, in the writing room they are showing as Face emojis while in the Custom Type builder the images on the slices are not rendered correctly.

Repo name is the-watch-collectors-club.prismic and my version of the slice machine ui is ^0.0.45 (using Nextjs)

3

Hi Kris,

I'll be happy to debug this with you, can you tell me a bit more about your file structure of your project, where are the custom screenshots being added?

Thanks.

4

@Phil The preview image is saved automatically in /slices/{sliceName}/preview.png

5

Hi Kris,

Can you try upgrading to the latest Alpha release to see if this addresses the issue?

npm install slice-machine-ui@0.1.0-alpha.1

This article explains the full changes:
https://prismic.io/blog/slice-variations-local-custom-types

6

@Phil , I am also having the screenshots issue. I tried to upgrade as mentioned above and there were issues with the migration script. It broke with the '.DS_Store` folders and was hard to tell how to do it manually. I even tried creating a new slice with the new version of the prismic-cli to get an idea of the proper file structure and it didn't quite work with the slice machine and storybook. Any suggestions would be great. I'm working on a client's site and have 20 or so slices in progress.

8

Hey Blaine,

I'm investigating this for you now with the team.

9

The team pushed a fix for your ds_store issue, can you try:

npm install slice-machine-ui@0.1.0-alpha.3
10

Thanks @Phil ! Still seeing issues tho :frowning_face:

Generated mocks and Stories are now stored in the .slicemachine folder.
TypeError: fs_1.default.rmSync is not a function
    at Object.remove (/.../node_modules/slice-machine-ui/build/lib/utils/files.js:75:22)
    at moveMocks (/.../node_modules/slice-machine-ui/changelog/versions/0.0.46/index.js:41:9)
    at migrateSlice (/.../node_modules/slice-machine-ui/changelog/versions/0.0.46/index.js:58:3)
    at /.../node_modules/slice-machine-ui/changelog/versions/0.0.46/index.js:85:13
    at Array.forEach (<anonymous>)
    at /.../node_modules/slice-machine-ui/changelog/versions/0.0.46/index.js:84:22
    at Array.forEach (<anonymous>)
    at Object.main (/.../node_modules/slice-machine-ui/changelog/versions/0.0.46/index.js:70:30)
    at run (.../node_modules/slice-machine-ui/changelog/migrate.js:36:15)
    at migrate (/.../node_modules/slice-machine-ui/changelog/migrate.js:65:10)
[slice-machine] Launching server
11

Darn, did the Builder Launch? I've passed this feedback to the team.

12

It did launch, but none of the migration happened. Let me know if I can provide any more info and if there is a way for me to do this manually.

13

Any update/progress on this? I still don't have slice screenshots. Are there any other ways to resolve this issue other that upgrading?

14

Hi Blaine,

We are still looking into this migration on the alpha, but I believe a fix for the images issue has been pushed to the stable version. So, if you can try deleting your node_modules and moving back to 0.0.46 then it should work for your images and we'll keep working on the migration.

Can you tell me what sort of laptop you're using?

Also, can you check your version of node isn't 15? Try upgrading to 16 if so.

Thanks.

16

You can also install the latest alpha 0.1.0-alpha.4

Sorry for the inconvenience

1 Like
17

This worked for me, thank you. @hugo.villain I will try the alpha upgrade when I have a breath on this project. Thank you both for your help.

2 Likes
18

Thank you for your input @blaine! We'll be releasing 0.1.0 really soon and I hope you'll give it a try

19

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