`useConvexAuth()` returns undefined (resolved: two versions of convex package loaded)

After I upgraded to v0.17.1, I had the problem shown in the title. This is my related error report and code:

8 Replies

I use code like this

const { isAuthenticated, isLoading } = useConvexAuth()

const { isAuthenticated, isLoading } = useConvexAuth()

in frontend react There is such a console error:

app-layout.tsx:127 Uncaught TypeError: Cannot destruction property 'isAuthenticated' of '(0 , convex_react__WEBPACK_IMPORTED_MODULE_8__.useConvexAuth)(...)' as it is undefined.
    at Authenticated (app-layout.tsx:127:11)
    at renderWithHooks (react-dom. development. js:16305:1)
    at mountIndeterminateComponent (react-dom. development. js:20074:1)
    at beginWork (react-dom. development. js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom. development. js:4277:1)
    at beginWork$1 (react-dom. development. js:27451:1)
    at performUnitOfWork (react-dom. development. js:26557:1)
    at workLoopSync (react-dom. development. js:26466:1)
    at renderRootSync (react-dom. development. js:26434:1)
    at performConcurrentWorkOnRoot (react-dom. development. js:25738:1)
    at workLoop (scheduler. development. js:266:1)
    at flushWork (scheduler. development. js:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:1)

app-layout.tsx:127 Uncaught TypeError: Cannot destruction property 'isAuthenticated' of '(0 , convex_react__WEBPACK_IMPORTED_MODULE_8__.useConvexAuth)(...)' as it is undefined.
    at Authenticated (app-layout.tsx:127:11)
    at renderWithHooks (react-dom. development. js:16305:1)
    at mountIndeterminateComponent (react-dom. development. js:20074:1)
    at beginWork (react-dom. development. js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom. development. js:4277:1)
    at beginWork$1 (react-dom. development. js:27451:1)
    at performUnitOfWork (react-dom. development. js:26557:1)
    at workLoopSync (react-dom. development. js:26466:1)
    at renderRootSync (react-dom. development. js:26434:1)
    at performConcurrentWorkOnRoot (react-dom. development. js:25738:1)
    at workLoop (scheduler. development. js:266:1)
    at flushWork (scheduler. development. js:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:1)

The same error happens on isLoading

Michal Srb•2y ago

Hmm, there was another report related to React Context recently. Mind trying deleting your node_modules and reinstalling?

ballingt•2y ago

@Francismiko What package manager are you using? I haven't been able to reproduce this yet, looking for patterns.

FrancismikoOP•2y ago

I am using the Yarn 3.0 version as a package management tool. It is very strange. I have never encountered this error before.😂 No effect, I'm looking for where the error occurs👨‍💻

ballingt•2y ago

@Francismiko are you using Clerk for auth? It's possible that what's happening is two different versions of Convex or React are being loaded, and a hook from one is looking for a React Context from the other. Also what version of Clerk or auth0 are you using?

FrancismikoOP•2y ago

@ballingt yep, I'm using @clerk/clerk-react": ^4.15.3 . This is my root render code

const convex = new ConvexReactClient(
  process.env.NEXT_PUBLIC_CONVEX_URL as string,
  { verbose: true },
)

<ClerkAuthProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}>
  <AppProvider...>
    <ConvexProviderWithClerk client={convex}>
      <AppLayout...>

const convex = new ConvexReactClient(
  process.env.NEXT_PUBLIC_CONVEX_URL as string,
  { verbose: true },
)

<ClerkAuthProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}>
  <AppProvider...>
    <ConvexProviderWithClerk client={convex}>
      <AppLayout...>

Michal Srb•2y ago

To debug this I'd try a minimal example first:

<ClerkProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}>
      <ConvexProviderWithClerk client={convex}>
        <App />
      </ConvexProviderWithClerk>
    </ClerkProvider>

<ClerkProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}>
      <ConvexProviderWithClerk client={convex}>
        <App />
      </ConvexProviderWithClerk>
    </ClerkProvider>

where App has the useConvexAuth() call. Based on the error message the component does not have the expected ConvexAuthContext. Are you using Next.js with Page or App Router? App Router will need 'use client' to propagate Context (check out our updated quickstarts).

ballingt•2y ago

Turns out this was an issue with two copies of Convex being loaded (0.17.1 and 0.16.1 in this case) such that the hook and the provider were from different copies of the library. It's hard to identify exactly this issue in an error message, but we can change the error message to be clearer about not finding the appropriate React context provider.

`useConvexAuth()` returns undefined (resolved: two versions of convex package loaded)

Did you find this page helpful?