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

[NawwafHusainDives]

@soasada I'm having the same error (except with useState) and I'm on "next": "^13.4.7"

[kasir-barati]

Same issue with "next": "^14.2.3" + nx: https://github.com/kasir-barati/you-say/actions/runs/9065980092

[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

[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

[danushsingla]

My situation was a little different as I was trying to deploy to Vercel with my Next.js application when this error occurred in the Vercel deployment logs. What ended up working for me was deleting my node_modules before I pushed to github, so that Vercel would recreate it. I also added node_modules to my .gitignore to prevent it from being added in the future.

I tried this after trying every solution in this forum for the issue. I am still using version 14.2.5 for Next. I don't think there is a straightforward answer to this issue honestly.

[jjnr-vo]

My team and I started facing this issue for over two months ago and it always seems to occur in only two of our pages. We manage to recreate this issue locally (not always consistently) only when first running the app since on HMR the error would not occur again. After quite a bit of investigation, the only thing that seemed to trigger this was an API call on server side that was resulting on a 404 and to verify if this was the culprit, we moved these API calls (and any custom functionality around it) into a new API route in the app and executed the call to said API route on client side. Ever since doing this it seems we no longer can recreate this error.

This is by no means a solution and I'm only sharing this to point out that this very much seems to be an issue on NextJS side when it comes to server rendering and error handling before handling client side, independent of your setup (if the distinction between server/client components on your app is correct) and that a failing API call on server seems to be trying to access a context on NextJS side (I believe it's the PathnameContext since ErrorBoundary makes a call to usePathname and these are mentioned in the error)

[vishnu-karuppusamy]

Thanks for the detailed analysis @jjnr-vo

[JClackett]

yes! I think this is it and seems to line up with what im seeing!

[grahamplace]

+1 that there is some generic issue in Next/turbo here. We also see this pop up occasionally in our project. Have not investigated the root cause. Next 14.2.4 using turbo dev. We restart the server and refresh in browser when this happens which is annoying but at least works around this issue.

[nagarajpandith]

I was facing the same issue, both locally as well as on vercel. I fixed it by downgrading eslint and eslint-config-next packages. Now it's fixed both on local as well as on vercel. I'll leave the exact steps below.

1. Downgraded eslint from 9.8.0 to 9.1.0 and eslint-config-next from 14.2.5 to 14.2.2 in package.json file
2. Deleted node_modules folder and lockfile
3. Reinstalled packages
4. Ran build on local (worked)

[Favourz1]

Which react and nextjs version are you using @nagarajpandith ?

[sidpg123]

I was using Turborepo with Next.js and Shadcn UI. I faced same issue when running the build command, so I checked the version of my dependencies and found a conflict with next and react versions. It was because I was using a release candidate version of Next.js. After resolving the conflicts, everything worked.

[rightson1]

Could you explain well

[Naeem775]

I had the same issue with next 14.2.5. After trying many things, downgrading to 14.1.4 worked for me. To confirm, I switched back to next 14.2.5 and encountered the error again, so for me, it was a version issue.

[JClackett]

I've noticed that this happens when reloading after I have had a client side error and the error boundary is hit.

[uigywnkiub]

Possible fix

"use client"; //tells Next.js to render this component on the client
export { SessionProvider as AuthProvider } from 'next-auth/react'

[karl-police]

Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

ok

bruh bruh bruh bruh bruh

I am trying to use React and Next.JS to statically export it onto gh-pages and I am getting that error

[georgeperry1]

I have tried most of the solutions suggested above and other than downgrading to an earlier version (13.5.6) from my current version (14.0.4) and pretty much nothing has worked - or even given me different errors.

I encountered the issue midway through developing a new feature on a branched version of my app. Going back to my main branch meant the error did not occur. I decided to create a new branch, then add each new change file by file, running yarn build after each new change to see if I could encounter the problem again.

Unfortunately, none of the changes reproduced the error so I couldn't actually identify any specific patterns that would help. However, the new branch was buildable and deployable without the error.

I'm not sure what this means, or if it helps anyone. It clearly not a sustainable "solution" but it is another piece in the puzzle...

[jadru]

In my case, I'm using so much libs in root package.json with yarn-berry based mono-repo.
Locally build makes no problem, but the Dockerfile based on Next.js Docs Example makes this issue.
I tried adding "next:latest14.2.5" package in both root and apps/my-next-prj package.jsons and delete RUN yarn add global next before build my workspace project. I think lib of "next" npm global running has some problem in docker environment. I tried everything in this issue and I solved with this solution:)

[shifenhutu]

same here

i try to the flowing steps to fixed my case:

1, delete the pnpm-lock.yaml file
2, run pnpm i

i hope it will help someone

[farhan-helmy]

Changed from pnpm to npm, suddenly it works

[pablojsx]

Same with 2 projects, one big project and now with a new project I just created(today)

[juliomuhlbauer]

I am having exactly this error. It is so annoying.

[ulrich00132]

Sale error here. Really annoying:
Failed to analyze files.js: Uncaught TypeError: Cannot read properties of null (reading 'useContext')
at useContext [as useContext] (../node_modules/react/cjs/react.development.js:1618:0)
at useAssertWrappedByClerkProvider (../node_modules/@clerk/shared/src/react/contexts.tsx:55:12)

[pablojsx]

Turbo suddenly stopped working for my big project, it might also stop working for this new project I just started...

[9inpachi]

This fixed the issue for me: https://www.reddit.com/r/reactjs/comments/vl7ww2/comment/je62deh/

I was using pnpm and added the option auto-install-peers=false to .npmrc and the peer dependencies weren't installed by the library after that which was the source of the error.

The issue appears to be from using npm link with or without a package specifying peerDependencies.

Resolution:

1. Publish your package to npm with a test version name "2.4.5-alpha.0"
2. npm unlink package
3. rm -rf node_modules in both package directories
4. npm cache clean --force (probably not necessary)

Switching to yarn works... until the problem arises again. So, just fix it.

[clalexander]

I've had the same issue, and I found the root cause to be that I had multiple versions of react installed in my monorepo. I had [email protected] installed in node_modules and [email protected] installed in app/node_modules (react-dom of same versions were also installed in each respective location).

useContext was being called from node_modules/react/cjs/react.development.js:1618:21 from renderWithHooks app/node_modules/react-dom/cjs/react-dom-server.browser.develoment.js:5658:16 (through styled-jsx) instead of the sibling react install.

My current solution is to set my app dependencies to react@^18.3.0 and react-dom@^18.3.0 with a clean install, though I am still exploring whether this is the best solution.