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.
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.
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.
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'
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
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.
