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

[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

[uncovercoin01]

I really want to try this as the last option now. Tried every option except this

[uncovercoin01]

I've been working on this for the past 3 days and finally saying good bye to this. Thank you @jonathanlal

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

[uncovercoin01]

Getting same issue on

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

[uncovercoin01]

Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useState')

[muzaf-dev]

had similar issue and reported here. #65447 (comment)

I've resolved the issue on my end, and it turned out to be related to pnpm.

As mentioned in this discussion:
🔗 TanStack Query PR #8383

I added NODE_ENV=development, which revealed that my layout was using useState, causing a prerendering error. Strangely, Next.js initially showed a different error message. Even though I had already added "use client", the issue persisted when building with pnpm.

How to Fix (if you're using pnpm):

1. Remove node_modules
2. Delete the pnpm-lock.yaml file
3. Run npm i (instead of pnpm install)
4. Run NODE_ENV=development next build to get a clearer error message

✅ Done! This should help identify and resolve the issue more easily.

[JamieGoodson]

If using a pnpm monorepo, you can resolve this by creating an .npmrc file in the root of your project and adding:

public-hoist-pattern[]=!react
public-hoist-pattern[]=!react-dom

Then pnpm install from the root.

Other docs suggested putting node-linker=hoisted in the .npmrc, but this did not work for me (error did not change).

This will isolate versions of react in your monorepo so that they won't override eachother if you have multiple packages with different React versions. This resolved my issue where NextJS's react version (v19.x) was disagreeing with Expo's react version (v18.x).

[sainijagjit]

It worked flawlessly

[andreiwow2]

For me, this happens whenever I import my component with next/dynamic

export const layouts = {
    DefaultPageLayout: dynamic(() => import('./DefaultPageLayout.js')),
};

This worked in my Monorepo, but then I created a library for my components, and doesn't work anymore.

If I use React.lazy, or just the component itself, it works, but with dynamic from next, it throws this same error

[NavaneethVijay]

Ended up moving to regular nextjs application instead of using turbo. What a waste of time to see while deploying

[GrahamQuan]

fixed this by not useing turbopack in dev mode

[iambenkay]

I was able to fix this by adding NODE_ENV=production before build command.

[S5SAJID]

Thanks, this was simple to do but it works 😄

[mommaroodles]

You also get this error if you call import React from 'react' twice on the same page - so if it's on a page and in one of the other imports on the same page

[kabirhawasapphire]

for me I have to go to next/dist/compiled/next-server/app-page.runtime.dev.js file and place question mark in return t.useContext => return t?.useContext note don't change all t.context just 2 of them that are like return t.useContext

it is likely bug in next 13 i am using 13.4.9

[koehn]

My own experience was this happened when I mistakenly put next-themes in my config.externals:

module.exports = withBundleAnalyzer({
    if (isServer) {
      config.externals = [
        ...config.externals,
        'next-themes',
      ];
    }
});

Once I removed that (which I think is handled by next.js automatically) everything worked fine.