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!

[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

[ziyaDev]

This issue is still happening even after disabling the Turbo build. It seems like the problem occurs during the build process, but what’s strange is that when I start the app, I get the error on the client side saying: useMyContext() not found
It’s quite frustrating because this happens after everything looks fine during the build. I suspect there’s something deeper going on with how the context is being handled at runtime, likely tied to Next.js core.

[kyle-kettler]

Running into this issue as well. It is hard to reproduce reliably and I am not even using context at all in my project.

This thread is almost 2 years old, has there been any input from the Next team on this?

[aashahin]

I think the problem is in next-intl

[xmannv]

I think the problem is using Turbo

[RicSala]

I think the problem is the combination of turbo with next-intl indeed...

[RicSala]

Just a heads up: If you disable turbo or delete next-intl, it stops happening, so I guess is something happening between those two.

[mickdewald]

I also had those issues with Next.js 15 RC and next-intl.
Now that you mention it, I switched to their new approach of routing documented here
https://next-intl-docs.vercel.app/blog/next-intl-3-22#i18n-request
(create i18n folder and move routing.ts and request.ts there)
and I haven't noticed the useContext error since.

[devenshah2018]

Facing this issue with the following versions:
next: 14.2.3
react: ^18.3.1

I am attempting to rebuild (next build) a previously successful deployment, but it is giving a similar issue to the one below. I tried downgrading/upgrading next and I forced all components and pages to be exported via client (SSR: false), but the issue persists.

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

Note: I am not using any providers or useContext (I cannot confirm the same for my dependencies)

Let me know if you all encountered the same issue with the same versions.

[cgzirim]

I'm facing the same issue with the same versions. Did you find a solution?

[cgzirim]

I was able to resolve the issue by setting NODE_ENV=production.

It’s a bit confusing, as the app ran okay locally with NODE_ENV set to "development". However, when deployed to DigitalOcean's App Platform, it failed.

[endrureza]

Has it been fixed on version 15 ? i still experience the problem on v14.*

[HTLA380]

Still having issue in next 15.

[DreamEcho100]

For me it happended because of an old page that was using next-seo

I removed it's usage and repkaced it withe next/head and metadata and it fixed it

[joepetrillo]

I just started seeing this build error when I upgraded to nextjs 15

[joepetrillo]

For some reason, I had to add react and react-DOM as peer dependencies for all the packages in my bun workspaces monorepo.

no idea why that fixed it. I have my next project, an api, and a types package. 🤷‍♂️

[iancmy]

What version of react and react-dom did you do for the peer dependencies?

[mehdiBenzaghar]

Hello,
Same issue in my end :-/

[mehdiBenzaghar]

Thanks @joepetrillo !
my stack mono repo bun, several packages, and i migrate from next14 to Next15, i had this issue and i sove it by adding "peerDependencies": {
"react": "^19.0.0-rc-7c8e5e7a-20241101",
"react-dom": "^19.0.0-rc-7c8e5e7a-20241101"
}
in all package.json

[ydn-tech]

Thank you @mehdiBenzaghar, this worked for me!

[ezengold]

If someone is still having this kind of issue, it is surely because you're using a fixed version of react or react-dom. And this version is conflicting with another version installed in the node_modules, maybe from another package if your are using a monorepo.
Consider changing by example in the package.json :

"react": "18.2.0",
"react-dom": "18.2.0",

to this

"react": "^18.2.0",
"react-dom": "^18.2.0",

So it is just about the ^ to let your project use a react version of your exact version or variants of 18.x.x

Hope this help @joepetrillo

[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

[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. 🙂