Slice simulator not working properly

Developing with Prismic
1

Describe your question/issue in detail

When reporting bugs, we recommend you do a recording of your issue with the Jam Chrome plugin:

The slice preview doesn't work, it appears blank event if you edit the placeholder in the index.tsx. The editor on the left seems to work alright.

This will give us lots of dev information to help debug your issue. You can remove it once you're done :slight_smile:

Impacted feature

Slice simulation

What steps have you taken to resolve this issue already?

Tried on a different browser like Edge and Brave. Also changed every variable from using JS instead if TS, to not using src/

Errors

The simulator preview doesn't work. The Simulator editor does works alright

Your Role

Developer

Hosting provider

Prismic

Package.json file

Steps to reproduce

  1. Clone GitHub - Zonalds/test-prismic-nextjs: A test repo for Prismic + NextJs
  2. Install packages with yarn install
  3. Run ``yarn slicemachinein one terminal andyarn start` in another terminal
  4. Simulate a slice, notice the editor works fine but not the preview.
2

Hey @obiezei, just tried on my end, I think you're experiencing a white screen because you're actually rendering white text on white background:

image
image2560×1380 270 KB

It looks like this happens because you're implementing dark more on your website, exciting! You can fine-tune your Slice Simulator's background to match the body's by using the background prop:

background="linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb))"

This does the trick on my end:

image
image2560×1380 273 KB

Let us know about it! Thanks for being part of Prismic Community~!

2 Likes
3

Thank you @lihbr, that solves my issue.

1 Like