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!

[matf3en]

Same issue, but with useRouter

[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

[askurat]

Ah, thank you. I just moved to pnpm and was thinking that was the issue. Downgrading to 13.4.5 worked for me as well.

[JunlinPan-Crypto]

@soasada I'm not aware of related issues and the reason causes this problem. We can only wait for a future version to see if this problem will be fixed.

[soasada]

The problem is fixed in 13.4.7

[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

[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

[fberbert]

I began exploring Next.js yesterday. As a beginner, I encountered an issue when attempting to build a production version using:

next build

However, using a different command resolved the issue:

npm run build

[dharnzkraft]

Hi, I'm also a beginner so I suppose the build command is supposed to generate an "out" folder containing the bundled folder of the app right? In my case, i ran the npm run build command and it ran successfully but it the generate the "out" folder. Am i missing something ?

[artemis-prime]

Has anyone actually filed a bug against this??

[jereloh]

Had same error - Cannot read properties of null (reading 'useContext' but only faced when using bun switch to pnpm and my project built just fine.

[hpaul]

Well, as 90% of bug cases on node.js dev I had removed the node_modules & package-lock.json updated (npm update --save) libraries and compiled again and everything went smooth.

I could do that because is a newly project but otherwise I don't think it's the best solution.

❯ npm --version
10.2.3
❯ node -v
v20.5.0

[AidenZadeh]

Recently upgraded Nextjs from 12 to 14 in our monorepo and faced with similar issue on NextJs 14.1.4

yarn dev works fine in local

yarn build fails with following error:

Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

We are using Page router but the fix mentioned in link above is for app router
Node version: v18.19.0
yarn version: 1.22.19

[AidenZadeh]

I was able to resolve the issue by following the instructions here: #42502

The next issue I faced was #56481
That was also resolved by replacing NODE_ENV with APP_ENV in turbo.json file

Note: The app is created by turborepo
Next: 14.1.4
Node: 18.19.0
yarn: 1.22.19
react: 18.2.0
tailwindcss: 3.4.1

[muhajirdev]

thanks for the clue @AidenZadeh

[AhmedKamalLoc]

That is works for me with the same setup

[jfarjona]

Same happened to me. I tried downgrading, upgrading, pretty much played with everything, just to find out that I needed a clean machine.
So I set up a new clean virtual machine (Debian 12), installed node, npm and yarn. Did a clone and compiled without a single problem.
Not sure why, but probably different libraries everywhere may be disrupting it.
Just my 5 cents.

[anilcan-kara]

Only next@13.4.5 worked for me, unfortunately, the rest of them are going to null pointer useContext...

"next": "13.4.5"

bun --bun run build

host uname -a Linux Precision-3571 6.8.1-060801-generic #202403151937 SMP PREEMPT_DYNAMIC Fri Mar 15 19:52:22 UTC 2024 x86_64 x86_64 x86_64 GNU/Linux

docker uname -a Linux docker 6.8.1-060801-generic #202403151937 SMP PREEMPT_DYNAMIC Fri Mar 15 19:52:22 UTC 2024 x86_64 GNU/Linux
bun -v 1.0.35
node -v v20.12.0

[Mary-Ya]

I faced this error too.
Try checking if your project dir or any parent of it has special symbols in the name.
In my case, : was causing the issue (yes, it got there by accident 😅).

[noahpeden]

For anyone who's running into this error, make sure you have a standard NODE_ENV in your .env, or delete it. I tried everything including downgrading, switching every file to use client, etc.. and nothing worked until I figured out that Next.js did not like my NODE_ENV="development"

[kelenakamura]

same issue for us.

[michielvandewalle]

same issue for us, removing the NODE_ENV="development" solved it.

[brandicph]

same issue here #43577 (reply in thread)

[zamaraevk]

Spent a night on this issue.

Nextjs 14.1.3

Had both: TypeError: Cannot read properties of null (reading 'useContext')
And Error: <Html> should not be imported outside of pages/_document.
(these issues are irrelevant)

I was able to build on local but not on the Docker instance.

The real issue is with the package manager versions. I am using pnpm, check your version on local env vs Docker. i had to pin the version and it made a trick.

RUN npm install -g pnpm@9.0.5

Hope this will save some time.

[jessejamesrich]

This is how I fixed it:

Prerequisite conditions:

1. Using a transpiledExternal package

2. Errors related predominantly to useContext and some hook error (that was intermittent)

3. Context when provided was incomplete (again intermittent)

4. Issue effects /pages but not /app

5. React 18.2, Next 14.2

Fix:

1. Confirm versions between external package and consumer package (Next) are the same across the board. This, for me, was React, react-dom, and three other packages (MUI & Emotion).
2. Ensure that there are not multiple instances of React or any other libraries by using webpack alias for any packages shared between the transpiled packages and Next.

/* @format */

import path from "path";

/** @type {import('next').NextConfig} */
const nextConfig = {
	transpilePackages: ["..."], // transpiled packagse here
	webpack: (config) => {
		config.resolve.alias = {
			...config.resolve.alias,
			react: path.resolve("./node_modules/react"),
			"react-dom": path.resolve("./node_modules/react-dom"),
			"...", // all shared deps in this array
		};
		return config;
	},
};

export default nextConfig;

I appreciate that this might not be a solution for those not dealing with external deps, but it worked for me.

[adrianszablowski]

Nextjs 14.1.3

Error when building on a production environment, surprisingly did not appear when building locally:

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

Upgrading the Next version from 14.1.3 to 14.2.3 solved the problem and everything works great!

EDIT: I know why this error appeared, the version of node 20.12.2-bookworm that I have was apparently not compatible with the version of Next 14.1.3, after upgrading to 14.2.3 everything started to work. So I definitely recommend starting with Next and then Node updates.

[emmanuelbuah]

Same issue

[kasir-barati]

It is really weird, I realized that when I create a new nx workspace + nextjs app it works perfectly fine and can build it. Wondering what am I doing wrong here, is it 3rd party libs, is it my conf 😖?

[maiconcarraro]

@kasir-barati are you using next-auth? I bet it could be related

[kasir-barati]

In the one that I am getting that error I am using @fusionauth/react-sdk. Read more @maiconcarraro: FusionAuth/fusionauth-javascript-sdk#99 (comment)

[emmanuelbuah]

I can confirm mine was due to multiple versions of react. I can't say if that's the case for everyone, but I'd recommend you check your node_modules folders to see if you have multiple versions of react installed. If so, make sure to update them to be the same version.

[stabildev]

I had this issue over and over again with next 14.2.3, react 18.3.1 and turbopack in dev mode.

Oddly enough it went away after formatting all files with prettier --write . My Prettier config adds semicolons, otherwise I have no idea why.

[senghuotlay]

Mine is pretty barebone, and still have this issue

import '../../globals.css';
import { QueryClientProvider } from '@/providers/queryClientProvider';
import { ClerkProvider } from '@clerk/nextjs';

export const metadata: Metadata = {
  title: ''
};

export default async function RootLayout({
  children
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='en'>
      <ClerkProvider
        appearance={{
          elements: {
            footer: 'hidden'
          }
        }}>
        <body>
          <QueryClientProvider>{children}</QueryClientProvider>
        </body>
      </ClerkProvider>
    </html>
  );
}

[kasir-barati]

Change your NODE_ENV value to production when executing next build: NODE_ENV=production next build

[jaspreet-singh-96]

For me Issue was due to NODE_ENV env variable. I removed it from .env file ad that fixed the issue.