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.
https://jam.dev/c/98ccbe47-05e4-4d4d-84b4-dec0db30ef11

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