appDir cannot read properties of null (reading useContext) @ build

[temrb]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

OS Mac

"next": "^13.0.0", "react": "^18.2.0",

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I get this Build error when using appdir experimental / swc No error when not using appdir experimental

TypeError: Cannot read properties of null (reading 'useContext')
--
21:43:44.798 | at exports.useContext (/vercel/path0/node_modules/react/cjs/react.production.min.js:24:118)
21:43:44.799 | at MotionComponent (file:///vercel/path0/node_modules/framer-motion/dist/es/motion/index.mjs:31:16)
21:43:44.799 | at Yd (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:101:25)
21:43:44.799 | at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:103:91)
21:43:44.799 | at Zd (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:105:98)
21:43:44.799 | at ae (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:104:424)
21:43:44.800 | at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:103:222)
21:43:44.800 | at Zd (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:105:98)
21:43:44.800 | at Yd (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:98:213)
21:43:44.800 | at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:103:91)
21:43:44.800 |  
21:43:44.801 | Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
21:43:44.802 | TypeError: Cannot read properties of null (reading 'useContext')
21:43:44.803 | at exports.useContext (/vercel/path0/node_modules/react/cjs/react.production.min.js:24:118)
21:43:44.803 | at MotionComponent (file:///vercel/path0/node_modules/framer-motion/dist/es/motion/index.mjs:31:16)
21:43:44.803 | at Yd (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:101:25)
21:43:44.803 | at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:103:91)
21:43:44.803 | at Zd (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:105:98)
21:43:44.804 | at ae (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:104:424)
21:43:44.804 | at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:103:222)
21:43:44.804 | at Zd (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:105:98)
21:43:44.804 | at Yd (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:98:213)
21:43:44.804 | at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:103:91)
21:43:44.804 | info  - Generating static pages (4/9)
21:43:44.815 | info  - Generating static pages (6/9)
21:43:45.037 | info  - Generating static pages (9/9)
21:43:45.039 |  
21:43:45.039 | > Build error occurred
21:43:45.042 | Error: Export encountered errors on following paths:
21:43:45.042 | /
21:43:45.043 | at /vercel/path0/node_modules/next/dist/export/index.js:405:19
21:43:45.043 | at runMicrotasks (<anonymous>)
21:43:45.044 | at processTicksAndRejections (node:internal/process/task_queues:96:5)
21:43:45.044 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
21:43:45.044 | at async /vercel/path0/node_modules/next/dist/build/index.js:1263:21
21:43:45.044 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
21:43:45.044 | at async /vercel/path0/node_modules/next/dist/build/index.js:1123:17
21:43:45.045 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
21:43:45.045 | at async Object.build [as default] (/vercel/path0/node_modules/next/dist/build/index.js:64:29)
21:43:45.092 | Error: Command "npm run build" exited with 1

Expected Behavior

No error w/ appdir

Link to reproduction

n/a

To Reproduce

Framer motion with nextjs 13?

[raajnadar]

Read this comment https://github.com/vercel/next.js/issues/41929#issuecomment-1292934463

[GeoBrodas]

I'm getting a similar error, but without using any react hooks.

Using Tailwind CSS in this build tho, heard that Turbopack doesn't support Tailwind, is it why this is happening?

My landing page at app/page.js

import Hero from '../components/landing/Hero';

export default function Home() {
  return (
    <div>
      <Hero />
    </div>
  );
}

Hero component at components/Landing/Hero.tsx

import Image from 'next/image';
import ProfileImage from '../../public/hero/new.png';

function Hero() {
  return (
    <div className="my-36 md:my-10 flex justify-evenly items-center">
      <div className="space-y-2 w-full md:w-1/2">
        <h2 className="font-bold text-3xl">Hey there!</h2>
        ...
    </div>

Edit: I was able to fix this by removing the next/head component from my Layout component. I do know that we cannot use React hooks in server components, but why the Head component?

[raajnadar]

@GeoBrodas It seems next/head is not required as we can add a layouts file for each folder, the new layouts system super seeds the usage of next/head, what do you think?

P.S. - I am not the maintainer of the Next Js, this is an unofficial statement, I might be wrong :)

[GeoBrodas]

hmm ok, makes sense

[thebinaryfelix]

Thanks for posting this @GeoBrodas I was having the same problem and fixed it by removing the Head component from my layout.tsx as you said. At least for now I can move on.

[GeoBrodas]

Thanks for posting this @GeoBrodas I was having the same problem and fixed it by removing the Head component from my layout.tsx as you said. At least for now I can move on.

Yea I figured as much, glad I could help

[huozhi]

Closed by #43425

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.