Issue with Slice Simulator

Hi,

I have a project with prismic slice machine and Next JS and we just upgraded everything to the new docs and added the slice simulator. But something very off happens when I go to open the simulator from slice machine.
Everytime I log in I keep getting this error. However, when my colleague does it he doesn't, so we know it's not the code as we are working in exactly the same code, branch and project.

I found a way of fixing it by clicking on "Check configuration" which results in a "succesfully configured" message and then I have to add /simulator to the URL and works. But I have to do that to every slice every single time and it's quite time-consuming, so it'd be great to find a way to fix this.

ps: one of the main reasons we picked Prismic initially was because of its integration with Storybook so just to note that we are not very happy with you no longer supporting its updates and having to work with something different.

Thanks

Hello @marina

Thanks for reaching out to us.

Whenever you simulate your component, you need to run npm run dev in another terminal along with npm run slice machine. Once you set all the configurations correctly in the project, you won't have errors on every Slice.

Have you checked the Slice Simulator troubleshooting guide?

Let me know if you have any further questions.

Thanks,
Priyanka

I run npm run dev at the same time, and I tried everything in the troubleshooting guide, but still happening. Most of the times it doesn't work now, just keeps failing on the second stage of the setup.

@marina Can you share your project (either a Zip file or Github code) with me?

Hi Marnina,

We released an update with some minor fixes yesterday, can you try updating to see if this helps:

Thanks.

Currently for me, "install dependencies" doesn't pass and it's asking me to install dependencies which are inconsistent with the documentation, eg prismic-reactjs and next-slicezone,

Additionally, when slice machine creates slices, it does so while importing libraries that are inconsistent with the documentation.

For example, if you create a slice with rich text, the slice component will be created including

import { RichText } from 'prismic-reactjs'

and I am currently manually updated them to use instead,

import { PrismicRichText } from '@prismicio/react'

Cheers

Hi Kevin,

I believe in your sm.json file you will need to change the framework field from previousNext to next:

"framework": "next"

Try that and let me know how it goes.

Thanks.

Also experiencing the same issue that @kevinf is having. Changing the framework field in the sm.json to

"framework": "next"

doesn't solve it.

EDIT: It does seem to work but throws the error...

Could not find a component for Slice type “call_to_action”

...where the slice would be displayed in Slice Simulator. Odd, as the slice displays perfectly in the site when running dev mode.

EDIT: Just realised I am being silly - the component in question pulls code in from another file so will not pull into slice simulator. I've created a new slice, which is working as it should :+1:

Cheers

I think I might know what the issue is, I need to confirm, I'll need your help.

Can you show me?

  1. components export index.js file (~/slices/index.js)
  2. component file (~/slices/name-of-slice/index.js)
  3. model file (~/slices/name-of-slice/model.json)
  4. mocks file (~/.slicemachine/assets/slices/name-of-slice/mocks.json)

Hi,
When migrating to the newer versions of libraries, I had the same problem as Kevin.
Previously Slice Simulator worked well, but when I migrated to
@prismicio/client, @prismicio/react, @prismicio/next, and slice-machine-ui version 0.3.4.
the Slice Simulator was showing that I need to install old packages and showed the code for slice-simulator.jsx using old libraries.

I wanted to add to this thread for anyone else looking - @Phil suggestion of changing framework to "framework": "next" in sm.json worked for me, and the previews are working again!
Thanks Phil!

Could you try to understand what is the problem here when migrating and maybe add this step to the Migration guide?
It took mi a lot of time, to find this thread and it was very frustrating issue to resolve, because there was no info on the internet about it. And also looks like the solution is very unexpected and not possible to figure out on your own.

Cheers

Hi Konrad,

I'm sorry to see you had this frustrating experience, I've updated the migration guide for this now.

I'm glad you were finally able to resolve this and advance though.

Thanks.

1 Like