TypeError: Cannot read properties of null (reading 'useContext')

[alsonick]

Verify canary release

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

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 16.17.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.3.4
  eslint-config-next: 13.0.0
  react: 17.0.2
  react-dom: 17.0.2

Which area of Next.js is affected? (leave empty if unsure)

Other

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/splashsaver/splashsaver.com

To Reproduce

1. Clone the GitHub repository (https://github.com/splashsaver/splashsaver.com).
2. Install the missing dependencies with yarn install.
3. Build the monorepo with yarn build.

Describe the Bug

Whenever I try to build my Turborepo project I get the following error.

TypeError: Cannot read properties of null (reading 'useContext')

More info:

landing:build: > Build error occurred
landing:build: Error: Export encountered errors on following paths:
landing:build:  /
landing:build:  /_error: /404
landing:build:  /_error: /500
landing:build:  /blog
landing:build:  /privacy
landing:build:  /team
landing:build:  /terms

I get the same error in my web app but with the respective paths, the docs app builds successfully.

When I run the Turborepo project locally the page returns an Internal Server Error message and I get the following error.

TypeError: Cannot read properties of null (reading 'useReducer')

Expected Behavior

Successful builds.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[balazsorban44]

next is incorrectly marked as a dependency here: https://github.com/splashsaver/splashsaver.com/blob/94f71848a4e2df8c9d68f06af9b53ccd59504868/packages/ui/package.json#L22, it should be a peerDependency. Likewise, react should be added as a peerDependency.

Furthermore, you can likely drop next-transpile-modules, as Next.js 13 now supports transpiling modules built in. See: https://beta.nextjs.org/docs/api-reference/next.config.js#transpilepackages

[alsonick]

Hi, thanks for the reply.

I've added next & react as peer dependencies inside the ui package and dropped the next-transpile-modules package but the issue still remains with builds failing. 94f7184

[alsonick]

Also when I try to run it on dev mode I get a similar error.

error - unhandledRejection: TypeError: Cannot read properties of null (reading 'useReducer')

These errors have been really puzzling to fix, so I'm in need of help here.

[Isaac-Tait]

EDITED:
I am having the same error:

Warning: 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useContext')

Here is a snippet from my package.json file:

  "dependencies": {
    "next": "^13.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss-hero-patterns": "^0.0.2",
    "util": "^0.12.5",
    "webpack": "^5.75.0"
  },

yarn outdated is not returning anything glaringly outdated...

My repo is a pretty bare bones template right now too.

[vishal-sarg]

Same here

	"name": "cheatsheet",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"dev": "next dev",
		"build": "next build",
		"start": "next start",
		"lint": "next lint"
	},
	"dependencies": {
		"eslint": "8.45.0",
		"eslint-config-next": "13.4.10",
		"next": "^13.4.10",
		"react": "18.2.0",
		"react-dom": "18.2.0"
	}
}

[arturs706]

Have the same issue

[Isaac-Tait]

SOLVED:
I remembered reading somewhere that next dev was throwing a similar error but when you run yarn dev instead the error went away. So, I gave it a try and now the error is gone... 🤔

[TheRealMkadmi]

It works! Do you happen to have an explanation as to why?

[GamerGirlandCo]

Same, except I was using pnpm. Thank you!

[polarbeariceskating]

Thank You

[chamodRash]

it worked. i ran npm run build and it build without any errors. Thank you!

[zayq]

i was using pnpx next build, tried pnpm run build and it worked, quite weird

[matf3en]

Same issue, but with useRouter

[brayanalexgiraldos]

Did you solve it? I have the same problem with this

[shawnbot]

For what it's worth, I was running into this same issue on Node 16.16.0, and upgrading to 18.5.0 resolved it. 🤷

[kkomelin]

I switched Vercel settings to Node 18 but it didn't help.

[riffbyte]

Latest Next.js patch (13.4.1) fixed it for me 👍🏻

[kkomelin]

@oleg-semyonov Thanks for the update. It worked for me too.

[kkomelin]

Got this error after upgrading the app from Next 13.1.6 to the latest Next 13.4.0, including some other dependencies, and deploying to Vercel:

TypeError: Cannot read properties of null (reading 'useReducer')

Locally everything is perfect. Fails on Vercel.

Made sure that local and remote Node version is 18. That didn't help.

[kkomelin]

@anil1712 Currently it's "next": "^13.4.2" and it works for me.

[anil1712]

@kkomelin I am using aws serveless stack for NextJs but it doesn't seems to be working there.

[anil1712]

@ijjk Do we even know why even it is breaking the basic functionality?

[anil1712]

@ijjk Please let me know what is the exact version should I use to make it work for now in AWS Serverless Stack, I tried several ones its doesn't working for me.

[ivanlen]

I had the same problem, switched from 13.1.6 to 13.4.0 and I started having errors in vercel.
Now using 13.4.3 and seems to be working fine.

[sideDesert]

I am still getting this error in 13.4.3 , however I am using turbo repo on top of it which seems to trigger the bug

[hwisnu222]

I think it's because of the difference in version React with other projects
Maybe you can try by adding nohoist to the root package.json . and include dependecies react and react-dom.

	"packages": [
			"apps/*"
		],
		"nohoist": [
			"**/react",
			"**/react-dom",
			"**/next",
			"**/react/**",
			"**/react-dom/**",
			"**/next/**",
		]
	},

[yousufnoor5]

Same error in next ^13.4.4

[ericabertan]

Same here

[yousufnoor5]

I tried the npm run dev command instead of next dev and it worked. Also, make sure to create a pages directory outside of the app folder

[malvarez88]

this worked for me! thanks!!

[JunlinPan-Crypto]

Same error in Next 13.4.6 under standalone output (custom server)

Downgrading to Next 13.4.5 works

[ShashWiz]

Same issue with "next": "14.2.6". Can someone please help me out

[farhan-helmy]

same issue here "next": "14.2.3", help us please team, my project are stuck because of this.

[evilosa]

@farhan-helmy I don't know will it help you or not. We had a same issue with "next": "14.2.6". We provided NODE_ENV before the build and it started to work
NODE_ENV=production yarn build

[jan-czerwinski]

thank you so much @evilosa !!!
Solved the issue for me

[robboerman]

@evilosa You are a legend, solved it!

[su79eu7k]

Had a same problem in 13.3.0, solved in 13.4.7.
In my case, it was related to dynamic import under 'use client' of appDir.

[Gzie3009]

i am using 13.4.7 still getting the error, can you tell me how you solved it

[Falven]

Dealing with this extremely frustrating error for several days now.
Wasn't even a fault on my part, upgrading to Next 13.4.8 fixed it; for now I guess since this keeps resurfacing.

[andreidmour]

I confirm this in 13.4.8, I downgraded to 13.4.5 and the same thing.

[Falven]

I confirm this in 13.4.8, I downgraded to 13.4.5 and the same thing.

Out of curiosity are you using React Context? Or a library that uses React Context?

[andreidmour]

React context...I removed the async from layout and moved to a provider and any hook just loads one time and stays unchanged. A solution could be to move all to another component and load it in layout

[Mridul2820]

I faced the same issue and it was fixed in 13.4.7 version
Here is my next and eslint-config-next version

"next": "13.4.7"

"eslint-config-next": "^13.4.7"

[sandviklee]

I have this issue right now, any solution?

[sandviklee]

Guys, I found a solution,

These worked for me.

[a-meicy]

Hi! I downgraded to 13.0.5 and the errors are gone. Thank you so much!

[RisingGeek]

@sandviklee downgrading to 13.0.5 worked. But do you know why it's happening

[AnastasiiaIlina]

I encountered the same issue and discovered that it was caused by a globally installed version of next.js. After removing the global installation and keeping next.js only within my project, the error was resolved. I hope my experience helps someone else facing a similar problem.

[pantharshit007]

Hey @joepetrillo
after checking other threads and consulting with a well know guy (ChatGPT) it pointed out my mistake which was using react and react-dom directly in @repo/ui where I have shadCn components so adding them as peer dependencies will solve the issue by not allowing that lib to packages them as a separate bundle.

I am pretty sure this will fix the issue try later in a separate branch, will update if this fixes the issue

//@repo/ui/package.json
"peerDependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
},
"dependencies": {
  "@hookform/resolvers": "^3.9.0",
  "@radix-ui/react-avatar": "^1.1.1",
  "@radix-ui/react-dropdown-menu": "^2.1.2",
  "@radix-ui/react-icons": "^1.3.1",
  "@radix-ui/react-label": "^2.1.0",
  "@radix-ui/react-slot": "^1.1.0",
  "@radix-ui/react-switch": "^1.1.1",
  "class-variance-authority": "^0.7.0",
  "clsx": "^2.1.1",
  "lucide-react": "^0.395.0",
  "react-hook-form": "^7.53.0",
  "tailwind-merge": "^2.3.0",
  "tailwindcss-animate": "^1.0.7",
  "zod": "^3.23.8"
},

EDIT: It worked

[caner-cetin]

"not the most productive tone", muttering silently, "not the most productive tone" yes, caner... "its not the most productive tone", keep calm honey. whatever you are thinking right now is not productive tone. keep calm.....

THIS ISSUE HAS BEEN GOING AROUND FOR TWO FULL YEARS NOW, 160 REPLIES, 130 COMMENTS, FULL OF UNRELATED FIXES, WHAT THE F$*K ARE WE DOING HERE

everyone is pulling out different solutions, some says "add node_env" some say "remove node_env" other says "remove turbo", someone says "dont pin dependencies", guess what

• i dont use turbo
• i dont set NODE_ENV to production
• i did not pin dependencies
• i am on next 14 and react 18 like everyone here in this thread

no one, not a single soul has successfully managed to replicate this issue. i have scanned entire thread and there is not a single minimal reproducible example. everyone is suffering from same shit, two years has passed and still no one is able to say "guys i found the issue, copy this, paste that, give me kiss as your gratitude". some lucky dude fixes the issue, posts here, "guys, this fixed it for me" and comment section follows

• it didnt fix for me
• OH MY GOD THANKSSSSSSSSQAKASDAS;KFKLDSDJF I OWE MY LIFE TO YOU
• unrelated comment to the discussion
• this doesnt work anymore after latest next update

WHAT ARE WE EVEN DOING HERE

edit and future edits: grammar because i lost my sanity thanks to modern frontend development
more edits: fixed by downgrading to next 13

[caner-cetin]

fixed after downgrading next from 14.2.18 to 13.5.7
i dont even know what to say anymore.
first i downgraded next from 15 to 14 because required node version was not supported by cloudflare pages
now i downgraded from 14 to 13 because god fucking knows what, and all of these happened in one day
im going to next 0.69 tomorrow at this pace

[caner-cetin]

and now tailwind is not working at next 13
oh my fucking god

[caner-cetin]

okay guys, this is. this is so fucking absurd. problem is gone if you use anything below 14.2, downgrading to 13 is not required. bump one more version from 14.1.4, poof, no more builds. but, it gets worse, versions below 14.2 will break tailwind. so there are no in betweens

go for 15, cloudflare wont build
go for 13, app router wont work
go for latest 14, next wont build
go for versions below 14.2, tailwind wont work

dont believe me? watch this.

https://streamable.com/e19eh8

next is a big fucking joke if you dont go for vercel and dont follow everything like vercel organization intended. everything is so opinionated that if i go out of my way and try to do some things by myself, everything breaks down and spirals into insanity. two full fucking years. i bet my ass that latest version of Next would work perfectly if I went for Vercel instead of CF pages.

edit: sorry for video quality and cropped terminal view. also video is longer than it should be because compiling a single page takes 8 to 15 seconds with M2 Max. just skip ahead while watching.

another edit: yes, writing a .nvmrc and setting nodejs version by myself in CF pages works, I can run latest version of next build.

but guess what

it fails with another new error!

[pantharshit007]

Oh I know your pain.. I am using turbo repo and sometimes it's hard to even make it run on their own system

[caner-cetin]

spent entire night to get this thing working, its way too painful than it should be. there are dozens of magical layers underneath of next and any one of them can break at anytime leading to this fucked up situation

i am not using next server components so, i am just going to use React + Parcel :/

[wkd-kapsule]

😂😂😂

Every now and then, I get emails from this thread and laugh at people saying Ok I've solved it doing X, knowing they'll be back here in a few days. The last comment caught my attention more than the others and I'd like to make a confession: I have not seen the error in months. I have a theory on why it gradually stopped popping up but I fear no one will like it.

At the time, I had tried every single "solution" proposed here and was still bothered by the error several times a day. To the point that I've built a relationship with it. I could feel it coming like It's been too long, it must be right at the corner. With time, I would look at it as a being, an entity, that just wants to live and do its thing. So I accepted it, as it is.

When it would pop up, instead of shouting F@#% you! I would greet it with Oh, long time no see, how ya doing? or Old friend, I'm in the middle of something right now, I don't really have the time to talk. This is when it began to show up less and less, down to not showing up at all anymore.

My conclusion: this entity is an ordeal sent by the gods of web dev. It is meant to test your resilience and let you prove your dedication to the work. Don't fight it, embrace it. Once you've achieved that, the gods will welcome you within the gates of the error-free haven.

It's a process though. Even with these method and mindset, the entity will still come back like once a week, as a reminder of the lessons learned along the way and to further test you. Usually, a simple greet and a refresh of the page will make it go away for another week.

And eventually, with patience, you'll make it to the haven. Peace to you all, my brothers and sisters in arms! I'll see you here soon.

[pantharshit007]

Same here I start having a gut feeling at some point yes it's about damn time for you to pop up my friend.

[JClackett]

It is indeed just a mindset, I love getting that little interruption when it errors now, I get to ponder life and have a think about what's important. Restart server and repeat. (still wish vercel would take this issue more seriously though lol)

[bongdungyeuem27]

I found that remove "react" and "react-dom" from next.config.ts -> experimental -> optimizePackageImages to resolve E.current.useContext problem

• next: 15.0.3
• react: 18.3.1
• react-dom: 18.3.1
• bun: 1.1.34
• node: void

[caner-cetin]

happy new year guys

[HTLA380]

Hi all, I've faced the same problem working with Turbo, Next.js 15, and React 19. Here's how I fixed it:

My Initial Setup

In my docs/package.json:

{
  "dependencies": {
    ...
    "next": "15.0.3",
    "react": "19.0.0-rc-b01722d5-20241114",
    "react-dom": "19.0.0-rc-b01722d5-20241114"
  }
}

In my packages/ui folder, which contains my ui library, I initially had this in peerDependencies:

{
  "peerDependencies": {
    "next": "14.x.x || 15.x.x",
    "react": ">= 18",
    "react-dom": ">= 18",
    "tailwindcss": "^3.4.14"
  }
}

---

The issue was a version mismatch between the peerDependencies in my ui package and the actual versions used in the docs app.

To fix it, I updated the peerDependencies in packages/ui to explicitly match the versions in docs:

{
  "peerDependencies": {
-   "next": "14.x.x || 15.x.x",
-    "react": ">= 18",
-    "react-dom": ">= 18",
+    "next": "15.0.3",
+    "react": "19.0.0-rc-b01722d5-20241114",
+    "react-dom": "19.0.0-rc-b01722d5-20241114"
  },
}

Hopefully, this might help someone who is facing the same issue. 🙂

[JClackett]

guarantee you'll run into it again :D

[jetonk]

Same issue here, but I found only it happens inside of a turborepo

I tried with:
npx create-next-app@latest
npx [email protected]

I initialised in standalone folder it worked perfectly fine.

[pantharshit007]

true, telling from painful experience.

[Othella]

Same here, waiting for a fix to ensure it only happens while developing

[valajczech]

I dont think its directly turborepo related, because I have two projects on turborepo and only one experiences this issue.

[steezeburger]

Just spent 2 days refactoring my app into a Nextj.js monorepo with Turborepo. Experiencing this issue now when trying to build. Have I made a huge mistake? Lol

[caner-cetin]

my condolences

[pmioduszewski]

In my case, meditating on tomatoes worked. The issue is gone.

[hyunwoona]

It worked for me after removing react and react-dom from package.json.

[juliomuhlbauer]

I heard that removing next also works

[Naeem775]

I found a solid solution that works well for me on all Next.js apps and versions.

Steps to Fix the Error

1. Locate the Problematic File
   First, find the file in node_modules that is causing the error. In my case, it was the react.production.min.js file located inside node_modules/react/cjs.

2. Identify the Error Line
   Look for the useContext line that is causing the issue. You can easily find this from the error console or on your home screen. In my case, the problematic line was:
   return U.current.useContext(a)};

3. Test the Manual Solution
   Add a ? in front of the useContext method. In my case, I updated it as follows:
   return U.current?.useContext(a)};

If this works (it has worked for me in all cases so far, though the file may differ between production and development environments), proceed to automate the fix.

4. Automate the Solution with a Post-Install Script
   To ensure the fix is applied automatically every time you deploy or run npm i in development mode, add a post-install script in your package.json file.

Example package.json

{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"cypress:open": "cypress open",
"postinstall": "node scripts/patchNodeModule.js"
}
}

Post-Install Script: patchNodeModule.js

const fs = require("fs");
const path = require("path");

// Adjust path
const reactProductionFilePath = path.join(
  __dirname,
  "..",
  "node_modules",
  "react",
  "cjs",
  "react.production.min.js"
);

// Function in case there are more than 1 files
function patchFile(filePath, searchString, replaceString, successMessage) {
  fs.readFile(filePath, "utf8", (err, data) => {
    if (err) {
      console.log(`Error reading file (${filePath}): ${err}`);
      return;
    }

    if (data.includes(replaceString)) {
      console.log(`${filePath} is already patched.`);
      return;
    }

    const result = data.replace(searchString, replaceString);

    fs.writeFile(filePath, result, "utf8", (err) => {
      if (err) {
        console.log(`Error writing file (${filePath}): ${err}`);
        return;
      }
      console.log(successMessage);
    });
  });
}

// Call the patching function
patchFile(
  reactProductionFilePath,
  "return U.current.useContext(a)};",
  "return U.current?.useContext(a)};",
  "React production.min.js file successfully patched."
);

[heymartinadams]

Thank you, @Naeem775!

[Naeem775]

Thank you, @Naeem775!

Glad it helped someone, it was a nightmare lol.

[heymartinadams]

Totally! 😅 And the lack of helpful stack tracing is atrocious.

[jonathanlal]

Happening to me now too also on 14.2.18. Found the fix though - you just need to delete the entire project and the error goes away.

[juliomuhlbauer]

This should be illegal

[jdfm]

I ran into this issue in a monorepo where multiple versions of react were specified between different apps/packages. It turns out the issue having those multiple versions available.

In this monorepo we're using npm as the package manager with the hoisted installation strategy. This was leading to React 18 being the one available in the root node_modules folder, which other packages that depended on react would pick up. Once we set overrides (npm's forced package resolution mechanism) so that all versions of react in the repo were v19, the issue being reported in this discussion went away.

I hope this helps.

[username14415]

The same error, I use

   "next": "^15.1.0",
   "react": "^19.0.0",
   "react-dom": "^19.0.0",

[steezeburger]

My issue was seemingly caused by version mismatches in subdependencies.

When I ran npm ls react, I would see lots of 18.3.1's and 19.0.0's still (I had to downgrade because another dependency does not yet support React 19).

I tried overrides, but that didn't work. I actually had the correct react and react-dom versions already. What I apparently needed to do was delete all node_module folders along with package-lock.json and reinstall everything ¯\(ツ)/¯.

When I re-ran npm ls react, I saw everything had 18.3.1:

  ├─┬ [email protected]
  │ ├── [email protected] deduped
  │ └─┬ [email protected]
  │   └── [email protected]

And builds worked after this.