Slice is not defined

The SliceMachine code snippet says I can use the following code:

<RichText render={slice.primary.title} />

but I get the Slice is not defined error when I try to use it. The only thing that works is using the SliceZone component but I want to understand why I can't use the code snippet from the Slice Machine. Do I have to import something else? Below is the code of the page.

import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
import { getSortedPostsData } from '../lib/posts';
import Link from 'next/link';
import Date from '../components/date';
import { createClient } from '../prismicio';
import { RichText } from 'prismic-reactjs';
import { SliceZone } from '@prismicio/react';
import { components } from '../slices';

export async function getStaticProps({ previewData }) {
  const allPostsData = getSortedPostsData();
  const client = createClient({ previewData })

  const page = await client.getSingle('homepage')

  return {
    props: { page, allPostsData }, // Will be passed to the page component as props

export default function Home({page}) {
  return (
    <Layout home>
      <section className={utilStyles.headingMd}>
        <p>[Your Self Introduction]</p>
          (This is a sample website - you’ll be building a site like this on{' '}
          <a href="">our Next.js tutorial</a>.)
         <RichText render={} />
          {/* this works */}
         <RichText render={[0].primary.title} />
         {/* this doesn't */}
         <RichText render={slice.primary.title} />
          {/* <SliceZone slices={} components={components} /> */}
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>Blog</h2>
        <ul className={utilStyles.list}>
          {{ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
            <Link href={`/posts/${id}`}>
            <br />
            <small className={utilStyles.lightText}>
              <Date dateString={date} />

Hello @izo, this might be related to this similar error some other users are experiencing. Can you send us a screenshot of the error and the URL of your repository?

Thanks for the additional info.
This is a different error.
You need to pass the Rich Text field to the component instead of the entire slice. What do you see if you print slice in your console?