Nextjs starter not working

Technologies Next.js
#1

I followed installing Nextjs with slice-machine-UI according to this tutorial 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",

#2

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?

If this doesn't work let me know.

Thanks.

#4

Hi there,

I am also having this issue.

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

#5

What errors are you seeing?

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

Can you run npm uninstall essential-slices?

#8

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.

#9

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

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.

1 Like
#10

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

#11

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!

#12

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):

[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).

#13

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

#14

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.

#15

@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?

#16

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:

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

Here is the package.json:

  "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"
  }
}
#17

OK, that makes sense. To use Slice Machine you will need to have at least version 12.16.1 of node installed on your machine. This is posted on many parts of the documentation.

#18

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

1 Like
#19

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