Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
temrb opened this issue Oct 27, 2022 · 8 comments
Closed
1 task done

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

temrb opened this issue Oct 27, 2022 · 8 comments
Assignees
Labels
area: app App directory (appDir: true) Metadata Related to Next.js' Metadata API.

Comments

@temrb
Copy link

temrb commented Oct 27, 2022

Verify canary release

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

@temrb temrb added the bug Issue was opened via the bug report template. label Oct 27, 2022
@raajnadar
Copy link

Read this comment #41929 (comment)

@GeoBrodas
Copy link

GeoBrodas commented Oct 27, 2022

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

image

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
Copy link

@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
Copy link

hmm ok, makes sense

@balazsorban44 balazsorban44 added area: app App directory (appDir: true) please add a complete reproduction The issue lacks information for further investigation Metadata Related to Next.js' Metadata API. area: documentation and removed please add a complete reproduction The issue lacks information for further investigation bug Issue was opened via the bug report template. labels Oct 27, 2022
@timneutkens timneutkens self-assigned this Nov 1, 2022
@thebinaryfelix
Copy link

thebinaryfelix commented Nov 2, 2022

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
Copy link

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 huozhi self-assigned this Nov 27, 2022
ijjk pushed a commit that referenced this issue Nov 30, 2022
Related to the build failure from #41931 

We need to bundle `next/head` so that it can appear in the
flight-client-manifest, so we changed the behavior to not treat it as
non externals.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)
@huozhi
Copy link
Member

huozhi commented Dec 9, 2022

Closed by #43425

@github-actions
Copy link
Contributor

github-actions bot commented Jan 8, 2023

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 8, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: app App directory (appDir: true) Metadata Related to Next.js' Metadata API.
Projects
None yet
Development

No branches or pull requests

7 participants