Help identifying how and why an error is occuring
Unanswered
Jboncz posted this in #help-forum
JbonczOP
I'm getting an error in dev mode and I am having a very hard time replicating it, so I cant determine if this issue would occur in build or not...
I have validated that I am not using useContext() or usePathname() in anything other than a functional component, not wrapped in any ifs or anything conditional.
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')
at usePathname (/data/nodejs/IAMWebPortal/.next/server/chunks/ssr/node_modules_next_dist_255eea._.js:4762:238)
at ErrorBoundary (/data/nodejs/IAMWebPortal/.next/server/chunks/ssr/node_modules_next_dist_255eea._.js:5072:227)
digest: "3123646700"
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')
at t.useContext (/data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:162241)
at usePathname (/data/nodejs/IAMWebPortal/.next/server/chunks/ssr/node_modules_next_dist_255eea._.js:4762:238)
at ErrorBoundary (/data/nodejs/IAMWebPortal/.next/server/chunks/ssr/node_modules_next_dist_255eea._.js:5072:227)
at au (/data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:10446)
at /data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:15122
at aw (/data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16908)
at a_ (/data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
at ab (/data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11808)
at /data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16871
at aw (/data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16908)
at aw (/data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46505)
at a_ (/data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
at ab (/data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11808)
at /data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16871
at aw (/data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16908)
at a_ (/data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
at /data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:58612
at /data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:59270
at aN (/data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:59278)
at Timeout._onTimeout (/data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:6939)
at listOnTimeout (node:internal/timers:569:17)
at process.processTimers (node:internal/timers:512:7)I have validated that I am not using useContext() or usePathname() in anything other than a functional component, not wrapped in any ifs or anything conditional.
14 Replies
JbonczOP
The issue is I cant pin down exactly where the issue is occuring, with the stack trace I get there isnt an obvious point its getting thrown. Im more than happy to provide code, but i cant provide the entire project, if someone can help me diagnose where the actual issue is occuring I would be greatful.
I just got the same error, and for me it was incorrect placement of a useEffect, but it can be caused by using certain hooks in if statements among other things
JbonczOP
Yeah.... its just being a PITA to track down. I made sure no hooks are inside of anything other than the body of the functional component, and all useEffects.
and it only happens sometimes, when a hotreload occurs.
TypeError: Cannot read properties of null (reading 'useContext')
at t.useContext (/data/nodejs/IAMWebPortal/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:162241)
at usePathname (/data/nodejs/IAMWebPortal/.next/server/chunks/ssr/node_modules_next_dist_255eea._.js:4762:238)This part made me go and look at every usePathname is used, which I completely ripped out to troubleshoot, still seeing the error.
JbonczOP
Yes…. Hmmm okay that is a possible cause, because it only happens when it does a few hot reloads in a row.
If I’m in there messing with multiple files in quick succession.
try it with webpack
and it should disappear