# Quick start not working with a Next.js project

**URL:** <https://community.prismic.io/t/quick-start-not-working-with-a-next-js-project/3164>\
**Category:** Developing with Prismic\
**Tags:** slice-machine\
**Created:** [December 10, 2020, 10:40pm UTC](https://community.prismic.io/t/quick-start-not-working-with-a-next-js-project/3164 "2020-12-10T22:40:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jware](https://avatars.discourse-cdn.com/v4/letter/j/5daacb/32.png) [@jware](https://community.prismic.io/u/jware)\
**Post date:** [December 10, 2020, 10:40pm UTC](https://community.prismic.io/t/quick-start-not-working-with-a-next-js-project/3164/1 "2020-12-10T22:40:36Z")

</div>

I've submitted an issue for this on Github, but I'm wondering if anyone else is running into this, or if there is some step I'm missing for using SM with Next.

> <https://github.com/prismicio/slice-machine/issues/63>
>
> \### Version
> 
> \- Prismic CLI version (know it by running \`prismic --version\`): 3….8.3-beta.0
> \- Node: 15.4.0
> \-NPM: 7.0.15
> 
> \### Reproduction
> 
> 1. Follow the quick start to set up including making a new Next.js project and a new repo: https://www.slicemachine.dev/documentation/next/nextjs-quick-start/
> 2. Go to http://localhost:3000/test and get the expected "your SliceZone is empty" response, though without the styling shown in the video
> 3. Following the video create a page with UID test
> 4. Add a single CTA slice as in the video (but this happens with any slice for me)
> 5. Refresh http://localhost:3000/test
> 
> 
> \### What is expected?
> 
> I should see a CTA slice rendered in the browser.
> 
> \### What is actually happening?
> 
> An exception is thrown. Here is the CLI output:
> \`ReferenceError: h is not defined
> at N (webpack-internal:///./node\_modules/essential-slices/dist/index.js:1303:3)
> at processChild (/Users/jware/Documents/work/exavault/synced\_source/marketing-website/node\_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
> at resolve (/Users/jware/Documents/work/exavault/synced\_source/marketing-website/node\_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
> at ReactDOMServerRenderer.render (/Users/jware/Documents/work/exavault/synced\_source/marketing-website/node\_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
> at ReactDOMServerRenderer.read (/Users/jware/Documents/work/exavault/synced\_source/marketing-website/node\_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
> at renderToString (/Users/jware/Documents/work/exavault/synced\_source/marketing-website/node\_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
> at Object.renderPage (/Users/jware/Documents/work/exavault/synced\_source/marketing-website/node\_modules/next/dist/next-server/server/render.js:53:851)
> at Function.getInitialProps (webpack-internal:///./node\_modules/next/dist/pages/\_document.js:135:19)
> at Function.getInitialProps (webpack-internal:///./pages/\_document.js:24:85)
> at loadGetInitialProps (/Users/jware/Documents/work/exavault/synced\_source/marketing-website/node\_modules/next/dist/next-server/lib/utils.js:5:101)\`
> 
> And the browser:
> !\[Screen Shot 2020-12-10 at 2 02 43 PM\](https://user-images.githubusercontent.com/872643/101835309-6ff7b980-3af0-11eb-927a-8969462e06eb.png)
> 
> 
> \### Any additional information
> 
> I've tried uninstalling and reinstalling prismic-cli, starting projects and Prismic repositories from scratch, upgrading Node, and using different components.
> If I run through the same process using Nuxt, everything works fine.

With a brand new project I run through the quick start for Next.js, use the most recent prismic-cli (3.8.3-beta.0), and create exactly the component used in the video in the quick start guide, in a brand new repo, and an exception is thrown when I try to load the content for that one slice.  
`ReferenceError: h is not defined`

This seems to be thrown in the render function for the built in slice library.

Everything works fine for me using Nuxt. Has anyone else seen this and figured out how to fix it?

---

<div class="post-metadata">

**Author:** ![samlittlefair](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/samlittlefair/32/696_2.png) [@samlittlefair](https://community.prismic.io/u/samlittlefair)\
**Post date:** [December 11, 2020, 10:01am UTC](https://community.prismic.io/t/quick-start-not-working-with-a-next-js-project/3164/3 "2020-12-11T10:01:23Z")

</div>

Hey @jware,

Thanks for posting this question.

First of all, can you check your `package.json` and see if these dependencies are up to date?

```auto
    "essential-slices": "^1.0.2",
    "theme-ui": "^0.3.4",

```

I'm not sure why, but I've seen other Next.js starters that wind up with old versions of these plugins.

If that's not the issue, could you share your project files with my in a .zip file or a GitHub repo? I'll be happy to take a look and try to debug. You can send them via DM if you don't want to share them publicly.

Thanks,  
Sam

---

<div class="post-metadata">

**Author:** ![jware](https://avatars.discourse-cdn.com/v4/letter/j/5daacb/32.png) [@jware](https://community.prismic.io/u/jware)\
**Post date:** [December 11, 2020, 5:29pm UTC](https://community.prismic.io/t/quick-start-not-working-with-a-next-js-project/3164/5 "2020-12-11T17:29:49Z")

</div>

Yes those are up to date. That was one of the first things I checked as I saw that issue that someone else ran into. It's happening to others who do the quick start right now as well it seems. I think there was some change in a dependency of essential-slices that breaks them now

---

<div class="post-metadata">

**Author:** ![cesar.leon](https://avatars.discourse-cdn.com/v4/letter/c/9e8a1a/32.png) [@cesar.leon](https://community.prismic.io/u/cesar.leon)\
**Post date:** [December 13, 2020, 4:29am UTC](https://community.prismic.io/t/quick-start-not-working-with-a-next-js-project/3164/6 "2020-12-13T04:29:51Z")

</div>

I'm getting the same error:

> ReferenceError: h is not defined X

Any suggestion?

---

<div class="post-metadata">

**Author:** ![samlittlefair](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/samlittlefair/32/696_2.png) [@samlittlefair](https://community.prismic.io/u/samlittlefair)\
**Post date:** [December 15, 2020, 1:36pm UTC](https://community.prismic.io/t/quick-start-not-working-with-a-next-js-project/3164/7 "2020-12-15T13:36:51Z")

</div>

Hey @jware and @cesar.leon,

I just saw that Hugo replied on the GitHub issue. You can try changing `essential-slices` to `1.0.3-alpha.0`. That worked for me. Let me know if it works for you.

Sam

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 22, 2020, 5:11pm UTC](https://community.prismic.io/t/quick-start-not-working-with-a-next-js-project/3164/8 "2020-12-22T17:11:57Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 5:57pm UTC](https://community.prismic.io/t/quick-start-not-working-with-a-next-js-project/3164/9 "2021-12-09T17:57:20Z")

</div>


