I have a turborepo with 2 NextJS projects in it.
When I run next build
I get this error:
[TypeError: Cannot read properties of null (reading 'useContext')]
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')
at exports.useContext (/Users/user/dev/repos/repo-root/node_modules/styled-jsx/node_modules/react/cjs/react.production.js:488:33)
Package.json of app A
{
"name": "docs",
"version": "0.1.0",
"type": "module",
"private": true,
"scripts": {
"dev": "next dev --turbopack -p 3001",
"build": "next build",
"start": "next start",
"lint": "next lint --max-warnings 0",
"check-types": "tsc --noEmit"
},
"dependencies": {
"next": "^15.2.1",
"react": "^19.1.0",
"react-dom": "^19.1.0"
},
"devDependencies": {
"@types/node": "^22.13.10",
"@types/react": "19.0.0",
"@types/react-dom": "19.0.0",
"eslint": "^9.22.0",
"typescript": "5.8.2"
}
}
Package.json of app B
{
"name": "app",
"version": "0.1.0",
"type": "module",
"private": true,
"scripts": {
"dev": "next dev --turbopack -p 3002",
"build": "next build",
"start": "next start",
"lint": "next lint --max-warnings 0",
"check-types": "tsc --noEmit"
},
"dependencies": {
"next": "^15.2.1",
"react": "19.0.0",
"react-dom": "19.0.0"
},
"devDependencies": {
"@types/node": "^22.13.10",
"@types/react": "19.0.0",
"@types/react-dom": "19.0.0",
"eslint": "^9.22.0",
"typescript": "5.8.2"
}
}
I tried creating a custom 404 and/or error pages without any success.
You need to use the same react
and react-dom
version for your packages/apps in your monorepo. Also put ^
before the version number.
For this specific case change your apps' A and B package.json
dependencies to this:
"react": "^19.1.0",
"react-dom": "^19.1.0"
Source: There's a comment in Vercel's next repo that explains it in more detail: link