Fresh Next.js demo - errors on development server

Developing with Prismic
1

I have a fresh Next.js Slice Machine set up with no custom code whatsoever. Storybook and Slice Machine builder are running fine, but development server initiated with yarn dev results in the following:

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
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/Users/iulion/code-nextjs/next-slicemachine-project/node_modules/@mdx-js/react/node_modules/react/cjs/react.development.js:1465:13)
    at Object.useContext (/Users/iulion/code-nextjs/next-slicemachine-project/node_modules/@mdx-js/react/node_modules/react/cjs/react.development.js:1473:20)
    at Object.useMDXComponents (/Users/iulion/code-nextjs/next-slicemachine-project/node_modules/@mdx-js/react/dist/cjs.js:128:53)
    at MDXProvider (/Users/iulion/code-nextjs/next-slicemachine-project/node_modules/@theme-ui/mdx/dist/index.js:42:23)
    at processChild (/Users/iulion/code-nextjs/next-slicemachine-project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/iulion/code-nextjs/next-slicemachine-project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/iulion/code-nextjs/next-slicemachine-project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/iulion/code-nextjs/next-slicemachine-project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/iulion/code-nextjs/next-slicemachine-project/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/Users/iulion/code-nextjs/next-slicemachine-project/node_modules/next/dist/next-server/server/render.js:53:851)

Any tips?

2

Hey Jere,

Is this following the setup steps in the Next–SliceMachine documentation?

In any case, could you share your project files in a GitHub repo or zip file?

Sam

3

That's following the above documentation, yes. The only difference being yarn instead of npm.

Here you go: https://github.com/jere-co/fresh-next-js-demo-errors-on-development-server

4

Hey Jere,

It looks like your dependencies are out of date. In your project, essential slices is at ^0.011, and you're missing the theme-ui depedency. When I tried to bootstrap your project, I got the same error as you. I updated the dependencies like so:

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

And the error went away.

We're currently recommending version 3.8.3-beta.0 of the CLI for development with Slice Machine. Are you on an older version of the CLI? If so, try updating and restarting the project, and it should go smoothly.

Let me know if you have any other questions or issues :slight_smile:

Sam

5

Hi Sam,

Thanks for having a look. I am in 3.8.3-beta-0 and generated the project with it. Odd that those dependencies were not up to date, but all working smooth now. Thanks again.

1 Like
6

@hi1 Great! Let me know if you have any other issues. I'll be here :slight_smile:

8

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