# Nextjs starter not working

**URL:** <https://community.prismic.io/t/nextjs-starter-not-working/4675>\
**Category:** Developing with Prismic\
**Tags:** nextjs\
**Created:** [March 25, 2021, 6:48am UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675 "2021-03-25T06:48:09Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![muhammad.ilhamsa1](https://avatars.discourse-cdn.com/v4/letter/m/ed655f/32.png) [@muhammad.ilhamsa1](https://community.prismic.io/u/muhammad.ilhamsa1)\
**Post date:** [March 25, 2021, 6:48am UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/1 "2021-03-25T06:48:09Z")

</div>

I followed installing Nextjs with slice-machine-UI according to this tutorial [https://prismic.io/docs/technologies/getting-started-nextjs](https://prismic.io/docs/technologies/getting-started-nextjs)

when I run I got an error

> Attempted import error: 'Context' is not exported from 'theme-ui' (imported as 'u').

console error :

```
yarn run v1.22.5
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - ./node_modules/essential-slices/dist/index.module.js
Attempted import error: 'Context' is not exported from 'theme-ui' (imported as 'u').
event - build page: /next/dist/pages/_error
wait - compiling...
error - ./node_modules/essential-slices/dist/index.module.js
Attempted import error: 'Context' is not exported from 'theme-ui' (imported as 'u').
Dev: local
Error: Cannot find module '/home/ilhamsa1/demo/test-prismic-next/.next/build-manifest.json'
Require stack:

```

is there any solution ?

my environment:  
node v14.11.0  
WSL 2

"theme-ui": "^0.6.0"  
"essential-slices": "^1.0.3",

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [March 25, 2021, 10:44am UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/2 "2021-03-25T10:44:48Z")

</div>

Hi Muhammad,

Welcome to the community! I'll be happy to help you debug this.

I think it might be related to the issues described in this thread, can you try the solutions here first?

> [@\[React/Next.js\] Trouble with peer dependencies on Slice Machine setup?](https://community.prismic.io/t/react-next-trouble-with-peer-dependencies-on-slice-machine-setup/4361):
>
> Node 15 now comes with NPM 7. This last one is now treating peer dependencies as required, throwing errors instead of warnings. This has led to some issues with Slice Machine setup that we just fixed! next-slicezone You should not experience the issue anymore when running $ prismic sm --setup with NPM 7. If you downgraded to NPM 6 (Node 14) in the meantime, you can get back to 7 again! Just make sure to update next-slicezone to 0.0.13 or higher~ relaxedStorybook You may also see some peer…

If this doesn't work let me know.

Thanks.

---

<div class="post-metadata">

**Author:** ![luke\_h](https://avatars.discourse-cdn.com/v4/letter/l/bbe5ce/32.png) [@luke\_h](https://community.prismic.io/u/luke_h)\
**Post date:** [March 26, 2021, 4:26pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/4 "2021-03-26T16:26:54Z")

</div>

Hi there,

I am also having this issue.

I have followed the solutions listed with no luck on getting a working version.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [March 26, 2021, 4:39pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/5 "2021-03-26T16:39:06Z")

</div>

What errors are you seeing?

---

<div class="post-metadata">

**Author:** ![luke\_h](https://avatars.discourse-cdn.com/v4/letter/l/bbe5ce/32.png) [@luke\_h](https://community.prismic.io/u/luke_h)\
**Post date:** [March 26, 2021, 4:41pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/6 "2021-03-26T16:41:46Z")

</div>

```
error - ./node_modules/essential-slices/dist/index.module.js
Attempted import error: 'Context' is not exported from 'theme-ui' (imported as 'u').
```

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [March 26, 2021, 4:46pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/7 "2021-03-26T16:46:42Z")

</div>

Can you run `npm uninstall essential-slices`?

---

<div class="post-metadata">

**Author:** ![luke\_h](https://avatars.discourse-cdn.com/v4/letter/l/bbe5ce/32.png) [@luke\_h](https://community.prismic.io/u/luke_h)\
**Post date:** [March 26, 2021, 5:01pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/8 "2021-03-26T17:01:00Z")

</div>

Uninstalling 'essential slices' and removing it's refs in the code brings me to where to the same place as following the solutions in the github issue.

It keeps spitting out this for a bunch of packages  
`There are multiple modules with names that only differ in casing.`

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [March 26, 2021, 5:21pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/9 "2021-03-26T17:21:59Z")

</div>

In fact the best thing to do right now is to start a new project with the boilerplate we created, simply run:

```auto
prismic theme --theme-url https://github.com/prismicio-community/slice-library-starter-next --conf sm.json

```

We'll be updating the documentation to use this instead next week.

---

<div class="post-metadata">

**Author:** ![luke\_h](https://avatars.discourse-cdn.com/v4/letter/l/bbe5ce/32.png) [@luke\_h](https://community.prismic.io/u/luke_h)\
**Post date:** [March 27, 2021, 3:53pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/10 "2021-03-27T15:53:29Z")

</div>

I'm afraid that is also giving me the same errors.

---

<div class="post-metadata">

**Author:** ![luke\_h](https://avatars.discourse-cdn.com/v4/letter/l/bbe5ce/32.png) [@luke\_h](https://community.prismic.io/u/luke_h)\
**Post date:** [March 27, 2021, 4:15pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/11 "2021-03-27T16:15:49Z")

</div>

Going through the errors I have found another.

```
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

```

Any help would be appreciated thanks!

---

<div class="post-metadata">

**Author:** ![jjames.home](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jjames.home/32/44_2.png) [@jjames.home](https://community.prismic.io/u/jjames.home)\
**Post date:** [March 27, 2021, 4:59pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/12 "2021-03-27T16:59:58Z")

</div>

I just tried this prismic theme and it no longer reproduces the error for me, however, I am having problems with the Slice Machine UI. When I make a modification to a slice that I created via the CLI with `--create-slice`. The error message is from `0.0.45` for `slice-machine-ui`. It breaks when I try to save it to the file system, but also when I modify the model manually and try to push the slice to Prismic.

I have only one slice. I try to make any modification to slice adding a new field but I receive this error (and I am using the example @Phil provided):

```auto
[slice-machine] (node:55327) UnhandledPromiseRejectionWarning: TypeError: content.flat is not a function
    at createMockFromConfig (/Users/jameshome/Documents/projects/nextjs-prismic-wecraft/node_modules/slice-machine-ui/lib/widgets/StructuredText/mock.js:46:18)
    at handleMockConfig (/Users/jameshome/Documents/projects/nextjs-prismic-wecraft/node_modules/slice-machine-ui/lib/widgets/StructuredText/mock.js:61:19)
    at handleFieldMock (/Users/jameshome/Documents/projects/nextjs-prismic-wecraft/node_modules/slice-machine-ui/lib/mock.js:25:12)
    at reduce (/Users/jameshome/Documents/projects/nextjs-prismic-wecraft/node_modules/slice-machine-ui/lib/mock.js:37:20)
    at Array.reduce (<anonymous>)
    at handleFields (/Users/jameshome/Documents/projects/nextjs-prismic-wecraft/node_modules/slice-machine-ui/lib/mock.js:32:17)
    at map (/Users/jameshome/Documents/projects/nextjs-prismic-wecraft/node_modules/slice-machine-ui/lib/mock.js:63:20)
    at Array.map (<anonymous>)
    at _callee$ (/Users/jameshome/Documents/projects/nextjs-prismic-wecraft/node_modules/slice-machine-ui/lib/mock.js:61:39)
    at tryCatch (/Users/jameshome/Documents/projects/nextjs-prismic-wecraft/node_modules/regenerator-runtime/runtime.js:63:40)

[slice-machine] (node:55327) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:55327) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

```

@luke_h I am wondering you get that error from just running `yarn dev` ? I had no issues until I used the Slice Machine UI and I did not see your error (yet).

---

<div class="post-metadata">

**Author:** ![luke\_h](https://avatars.discourse-cdn.com/v4/letter/l/bbe5ce/32.png) [@luke\_h](https://community.prismic.io/u/luke_h)\
**Post date:** [March 27, 2021, 5:24pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/13 "2021-03-27T17:24:34Z")

</div>

Yeh I'm getting it straight after installing the prismic theme and running yarn/npm run dev.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [March 29, 2021, 2:59pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/14 "2021-03-29T14:59:31Z")

</div>

What version of the CLI are you using @luke_h ? Can you try updating to the latest `npm i prismic-cli`?

I tried installing the theme with no issues. Try to make sure you're not suing both NPM & Yarn.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [March 29, 2021, 3:20pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/15 "2021-03-29T15:20:48Z")

</div>

@jjames.home I wasn't able to reproduce this error.

What version of the CLI do you have?

Can you send me a screen recording of the issue and also the dependencies in the `package.json`?

---

<div class="post-metadata">

**Author:** ![jjames.home](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jjames.home/32/44_2.png) [@jjames.home](https://community.prismic.io/u/jjames.home)\
**Post date:** [March 29, 2021, 9:44pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/16 "2021-03-29T21:44:13Z")

</div>

Edited: Updated node version from `10` to `15` and it seems to be working. Will update this post again if it doesn't.

Absolutely.

I am using `3.8.9` at the moment and here is a screen recording:

[![](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/0/0764691e217aa019f00cadd9d5377e825e400575.jpeg "Slice Machine NextJS") ](https://www.youtube.com/watch?v=J9UmhlWmkHk)

Please let me know if I can provide anything else to help debug this.

Here is the `package.json`:

```auto
  "name": "slice-library-starter-next",
  "version": "0.0.0",
  "description": "An awesome Slice Library made with Next.js",
  "author": "<author>",
  "license": "MIT",
  "main": "slices/index.js",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "prepublishOnly": "node ./node_modules/sm-commons/scripts/bundle",
    "slicemachine": "start-slicemachine --port 9999",
    "storybook": "start-storybook -p 8888",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "next": "^10.0.8",
    "next-slicezone": "^0.0.14",
    "next-transpile-modules": "^6.1.0",
    "prismic-javascript": "^3.0.2",
    "prismic-reactjs": "^1.3.3",
    "react": "16.14.0",
    "react-dom": "16.14.0"
  },
  "devDependencies": {
    "@storybook/react": "6.1.21",
    "@tailwindcss/postcss7-compat": "^2.0.4",
    "autoprefixer": "^9.8.6",
    "babel-loader": "^8.2.2",
    "babel-plugin-react-require": "^3.1.3",
    "postcss": "^7.0.35",
    "shx": "^0.3.3",
    "slice-machine-ui": "^0.0.44",
    "sm-commons": "^0.0.23",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4"
  }
}

```

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [March 30, 2021, 9:08am UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/17 "2021-03-30T09:08:26Z")

</div>

OK, that makes sense. To use Slice Machine you will need to have at least [version 12.16.1 of node installed](https://nodejs.org/) on your machine. This is posted on many parts of the documentation.

---

<div class="post-metadata">

**Author:** ![jjames.home](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jjames.home/32/44_2.png) [@jjames.home](https://community.prismic.io/u/jjames.home)\
**Post date:** [March 30, 2021, 1:54pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/18 "2021-03-30T13:54:47Z")

</div>

I had switched to an older version for a legacy project a month ago. Sometimes you just miss seemingly obvious things!

---

<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:** [April 1, 2021, 3:50pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/19 "2021-04-01T15:50:52Z")

</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, 4:24pm UTC](https://community.prismic.io/t/nextjs-starter-not-working/4675/20 "2021-12-09T16:24:08Z")

</div>


