Slice Simulator Error

Hello Everyone, I am trying to develop a website following this tutorial :

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 (
      Placeholder component for hero_slice (variation: {slice.variation}) Slices

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={} components={components} />
export default Page
export async function getStaticProps({ previewData }) {
  const client = createClient({ previewData })
  const page = await client.getSingle('homepage')
  return {
    props: {

I don't know what step I've missed

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