Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

State:
Created a year ago
Reactions:3
Comments:7 (1 by maintainers)

Top GitHub Comments

1reaction

GeoBrodascommented, Oct 27, 2022

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?

1reaction

raajnadarcommented, Oct 27, 2022

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

Top Results From Across the Web

How to fix cannot read properties of null (reading 'useContext')?

I tried to debug it, but can't found what really make it those error: cannot read properties of null (reading 'useContext') && react.development ......

v13: Build problems: Cannot read properties of null ... - GitHub

Hi I am getting errors when trying to run next build, when running next dev it works fine. Here is the console output...

cannot read properties of null (reading 'usecontext') jest

From what I can tell of the code it seems you want the Store function to create and return a Redux store object,...

Context API with React Hooks. error "Cannot read property '' of ...

I would like to make app which you can write your username of GitHub Acount and show your repositories on next page. But...

[SOLVED] Cannot read properties of null (reading 'useContext')

Hello, I'm getting this error Cannot read properties of null (reading 'useContext') while using import { useChain, useMoralis } from "react-moralis"; ...