Local Slice Simulator not working

Developing with Prismic
1

I'm trying to run the slice simulator in on my local but when I enter "http://localhost:3000/slice-simulator" as a url I get an error on the page that says:

TypeError: t.partial is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Also when I try to create a slice and I go to What Is Content Modeling? - Documentation - Prismic and follow the steps, I dont see a button that says Open Slice Simulator. When I run npm run slicemachine and go to the Slice Editor and click Preview Slice, it says configuration not complete. Step 2 is not setup, even tho I have copy and pasted and followed instructions.

I am using Nextjs

Thanks for any help on this!

3

Hello @randyrollog

Welcome to the Prismic community, and thanks for reaching out to us.

To Preview Slices in the Slice simulator, here are the steps:

  1. Create Slice Simulator page in your project.
  2. Add a property for the Slice Simulator URL in the sm.json. This should be: "localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
  3. Simulate the slices to see what it looks like in your development environment. Ensure your app is running on another terminal: npm run dev. You need to run npm run dev on another terminal.
  4. Now, on the Slice editor page on the Slice Machine, click "Preview Slices".
    You should now see a simulated preview of your Slice with mock data.

Let me know if it still doesn't solve your issue.

Thanks,
Priyanka

4

hi @Priyanka

I've ran through this multiple times. But I'm still seeing the error that the configuration isn't set up. But it is...

Heres what I see when I go to localhost:3000/slice-simulator

Screen Shot 2022-06-14 at 12.18.18 PM
Screen Shot 2022-06-14 at 12.18.18 PM1246×760 56.6 KB

5

Hello @randyrollog

It's difficult for me to troubleshoot your issue without your project source code. You can share it with me by private message.

Thanks,
Priyanka

7

I have the same problem (Next.js), @randyrollog did you solve it somehow?

8

I solved this by updating my node from v12 to v16

1 Like
11

Ah, thank you!

1 Like
12

Hi @Priyanka , I'm having a problem with the slice simulation... Nothing is being rendered, it's just empty.

image
image3010×1806 305 KB

I checked my local slice simulator, the url is correct. I also tried the solution mentioned by others which was updating my node to v16, but it didnt work.

Can you identify what's the issue?

image
image1202×382 33.5 KB

This is my source code.

image
image1388×956 101 KB

1 Like
14

Hello @clarissecasi

Welcome to the Prismic community, and thanks for reaching out to us.

Can you tell me the version of npm and the slice machine ui?

Thanks,
Priyanka

15

Hi again,

Sure. My node version is v16.18.0 (npm v9.7.1) then my slice machine's version is v1.4.0

16

Hello @clarissecasi

Have you tried all the steps given in the troubleshooting guide? Troubleshooting: Slice Simulator

If it still doesn't work, sen me your project and repo name in a private message. I'll try on my locale.

Thanks,
Priyanka