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

[ashwanijha04]

Summary

I deployed a nextjs app one month ago on vercel which is still running fine. Today, I wanted to make some changes in it and see that My nextjs app mainline is randomly failing with the below error:

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

Note that I am not using useReducer directly in my app and also is evident from the stack trace.

On digging deeper, I tried to create a new NextJs project from the official doc using create-next-app@latest.
Surprisingly, that also gave me the same error. Apparently, all nextjs app is failing for me when I use the latest version.

Here is my package.json:

  "name": "boilerplate-saas",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --no-lint",
    "build": "set NODE_ENV=production && next build --no-lint",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^2.1.5",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-navigation-menu": "^1.2.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@shadcn/ui": "^0.0.4",
    "axios": "^1.7.7",
    "chart.js": "^4.4.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "framer-motion": "^11.4.5",
    "lucide-react": "^0.441.0",
    "next": "14.1",
    "next-auth": "^4.24.7",
    "radix-ui": "^1.0.1",
    "react": "^18.2",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2",
    "react-icons": "^5.3.0",
    "react-portal": "^4.2.2",
    "react-slick": "^0.30.2",
    "recharts": "^2.12.7",
    "slick-carousel": "^1.8.1",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.4.20",
    "eslint": "^8",
    "eslint-config-next": "14.2.11",
    "postcss": "^8.4.45",
    "tailwindcss": "^3.4.11",
    "typescript": "^5"
  }
}

Additional information

Please help me fix this issue.

Example

No response

[ashwanijha04]

Here is my full stack trace:

 1 of 1 unhandled error
Server Error
TypeError: Cannot read properties of null (reading 'useReducer')

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.useReducer
file:///opt/homebrew/lib/node_modules/next/node_modules/react/cjs/react.development.js (1626:21)
ReactDevOverlay
file:///opt/homebrew/lib/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js (25:9344)
ReactDevOverlay
file:///opt/homebrew/lib/node_modules/next/dist/server/dev/next-dev-server.js (95:12)
renderWithHooks
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)
renderIndeterminateComponent
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5732:15)
renderElement
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5957:7)
renderNodeDestructiveImpl
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6115:11)
renderNodeDestructive
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6087:14)
renderNode
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6270:12)
renderHostElement
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5963:5)
renderNodeDestructiveImpl
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6115:11)
renderNodeDestructive
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6087:14)
renderIndeterminateComponent
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5786:7)
renderElement
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5957:7)
renderNodeDestructiveImpl
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6115:11)
renderNodeDestructive
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6087:14)
retryTask
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6539:5)
performWork
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6587:7)
<unknown>
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6913:12)
scheduleWork
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (77:3)
startWork
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6912:3)
<unknown>
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (7007:5)
new Promise
<anonymous>
Object.renderToReadableStream
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6960:10)
ez
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js (30:14173)
Object.t [as renderPage]
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js (48:911)
Object.defaultGetInitialProps
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js (39:3604)
defaultGetInitialProps
../opt/homebrew/lib/node_modules/next/dist/pages/_document.js (815:19)
en
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js (30:4347)
n
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js (48:1582)
e3
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js (48:2483)
<unknown>
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js (48:2981)
<unknown>
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/server/lib/trace/tracer.js (121:36)
NoopContextManager.with
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/compiled/@opentelemetry/api/index.js (1:7057)
ContextAPI.with
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/compiled/@opentelemetry/api/index.js (1:516)
NoopTracer.startActiveSpan
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/compiled/@opentelemetry/api/index.js (1:18086)
ProxyTracer.startActiveSpan
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/compiled/@opentelemetry/api/index.js (1:18847)
<unknown>
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/server/lib/trace/tracer.js (110:107)
NoopContextManager.with
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/compiled/@opentelemetry/api/index.js (1:7057)
ContextAPI.with
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/compiled/@opentelemetry/api/index.js (1:516)
NextTracerImpl.trace
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/server/lib/trace/tracer.js (110:32)
eZ
file:///Users/ashwajha/Desktop/boilerplate-saas/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js (48:2872)
async doRender
file:///opt/homebrew/lib/node_modules/next/dist/server/base-server.js (1381:30)
async cacheEntry.responseCache.get.routeKind
file:///opt/homebrew/lib/node_modules/next/dist/server/base-server.js (1555:28)
async DevServer.renderToResponseWithComponentsImpl
file:///opt/homebrew/lib/node_modules/next/dist/server/base-server.js (1463:28)
async DevServer.renderErrorToResponseImpl
file:///opt/homebrew/lib/node_modules/next/dist/server/base-server.js (2114:24)
async pipe.req.req
file:///opt/homebrew/lib/node_modules/next/dist/server/base-server.js (1988:30)
async DevServer.pipeImpl
file:///opt/homebrew/lib/node_modules/next/dist/server/base-server.js (911:25)
async NextNodeServer.handleCatchallRenderRequest
file:///opt/homebrew/lib/node_modules/next/dist/server/next-server.js (286:21)

[icyJoseph]

Just out of curiosity, what Node.js version are you using?

[Emmycodez]

Have you been able to resolve the issue now, cos i'm having the same issues

[ashwanijha04]

It is a problem with next. I simply did

npm run dev

and it worked.

[ashwanijha04]

Fixed it with:

npm run dev

Seems to be a problem with where next is installed. Next is trying to pickup files from /opt/homebrew whereas it should pick it up from project folder.

[icyJoseph]

Looks similar to this issue, #76103

[Emmycodez]

I start the project with the npm run dev command, it works fine at first then after some time the error is gonna come back up. I'd have to stop the server and run the npm run dev command again. I have been doing this over and over again. I don't know if this is a Next Js issue or if it's from my machine