Slice Simulator Error

Developing with Prismic
, ,
1

Hello Everyone, I am trying to develop a website following this tutorial : https://www.youtube.com/watch?v=QeD31HHsREg&t=761s

And when I want to see the simulator of my slices I get nothing but a text saying : "Placeholder component for hero_slice (variation: default) Slices"
And the content I created, pushed and edited on prismic don't show up on localhost. (same text)

The code I have in my slices is for e.g in "HeroSlice"

const HeroSlice = ({ slice }) => {
  return (
    <section
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      Placeholder component for hero_slice (variation: {slice.variation}) Slices
    </section>
  );
};

export default HeroSlice;

and in my index.jsx in my /pages/ folder is :

import { SliceZone } from '@prismicio/react'
import { createClient } from '../prismicio'
import { components } from '../slices'
 
const Page = ({ page, navigation, settings }) => {
  return <SliceZone slices={page.data.slices} components={components} />
}
 
export default Page
 
export async function getStaticProps({ previewData }) {
  const client = createClient({ previewData })
  const page = await client.getSingle('homepage')
  return {
    props: {
      page
    }
  }
}

I don't know what step I've missed

72461750fb5c31c75a8ad72908f01721
72461750fb5c31c75a8ad72908f017211859×776 139 KB

3

Update if someone cares.

It seems that I didn't fully understood the extend of the utilization of slice-machine and I thought it would create the richtext by itself on the slices/slicename/index.js BUT I have to this myself.

1 Like