usePathname causes "Invalid hook call" due to useContext?

Unanswered

Ragdoll posted this in #help-forum

RagdollOP

2024-07-28T12:57:26.316Z

With a brand new project created with npx create-next-app@latest my-app --typescript --tailwind --eslint as mentioned in the shadcn/ui installation docs, I experience the following error.

I have not been able to find the root cause of this. I have seen this happen with a couple of projects so far, not all of them are using shadcn or are the latest Nextjs version (this one is).

I am using turbopack in development, but production projects which are on Cloudflare Pages, also experiences this issue where it renders a blank page with just "Internal server error" as text, after a refresh it works again.

In development, it requires a restart to work again.

I have found some other Github issues and stackoverflow questions, but none seem to be the answer to this. They all mention that it's caused by multipe React(-dom) versions, but according to npm ls react, I only have 18.3.1 installed.

 ⨯ TypeError: Cannot read properties of null (reading 'useContext')
    at usePathname (/PROJECTPATH/.next/server/chunks/ssr/node_modules_next_dist_esm_1c713e._.js:3834:238)
    at ErrorBoundary (/PROJECTPATH/.next/server/chunks/ssr/node_modules_next_dist_esm_1c713e._.js:4144:227)
digest: "2171786467"
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 (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:162241)
    at usePathname (/PROJECTPATH/.next/server/chunks/ssr/node_modules_next_dist_esm_1c713e._.js:3834:238)
    at ErrorBoundary (/PROJECTPATH/.next/server/chunks/ssr/node_modules_next_dist_esm_1c713e._.js:4144:227)
    at au (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:10446)
    at /PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:15122
    at aw (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16908)
    at a_ (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at ab (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11808)
    at /PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16871
    at aw (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16908)
    at aw (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46505)
    at a_ (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at ab (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11808)
    at /PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16871
    at aw (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16908)
    at a_ (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at /PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:58612
    at /PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:59270
    at aN (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:59278)
    at Timeout._onTimeout (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:6939)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)

13 Replies

Double-striped Thick-knee

2024-07-28T15:45:47.232Z

try reinstalling, I'm not having any issue with the installation command that you provided

RagdollOP

2024-07-28T15:47:35.061Z

It’s inconsistent to reproduce

It sometimes happens after some time when making changes or navigating

And with changes I mean just building a page with eg components from shadcn, nothing else

@Ragdoll It’s inconsistent to reproduce

Double-striped Thick-knee

2024-07-28T15:48:36.556Z

I remebter having this kinda issue with turbopack

have you faced it without turbopack?

RagdollOP

2024-07-28T16:42:30.174Z

Not yet, but I do experience it on production with just the edge runtime, not sure if that’s the same issue

But maybe it’s a bit different indeed, hard to get production logs since it doesn’t trigger sentry hahaha

Double-striped Thick-knee

2024-07-28T16:44:03.503Z

maybe don't use turbopack, it's still not stable

Spectacled bear

2024-07-29T01:53:57.954Z

I have both the issues you describe. That first issue just happens randomly in dev mode and needs a restart to fix. Don't think it's anything we are doing incorrectly. I just figured its a bug.

The second issue where you get Internal Server Error when hosting on cloudflare, I get the same issue. Seems random. I have the exact app also deployed to vercel but it does not occur there.

@Spectacled bear I have both the issues you describe. That first issue just happens randomly in dev mode and needs a restart to fix. Don't think it's anything we are doing incorrectly. I just figured its a bug. The second issue where you get `Internal Server Error` when hosting on cloudflare, I get the same issue. Seems random. I have the exact app also deployed to vercel but it does not occur there.

RagdollOP

2024-07-29T06:11:56.437Z

Aha, so I’m not crazy at all 😅

Scottish Fold

2024-07-31T18:36:57.918Z

it's believed to be https://github.com/vercel/next.js/issues/67694

@Scottish Fold it's believed to be https://github.com/vercel/next.js/issues/67694

RagdollOP

2024-07-31T19:21:37.823Z

This sounds like exactly the same issue indeed, looks like it's also related to next-on-pages in this case. I'll follow it, thanks!