Issue with Clerk Setup With Convex | Convex Community | Page 1

pearl vigil Jul 23, 2025, 5:22 PM

#

I set up Clerk and Convex via the docs, but get this error in my dev console (it doesnt work in a production build either) Am I missing an environment variable or something? If I remove the ConvexClientProvider there is no issue. The Clerk Authentication works as intended...

📎 message.txt

tropic prism Jul 23, 2025, 6:02 PM

#

Can you share the file with ConvexClientProvider

pearl vigil Jul 23, 2025, 6:12 PM

#

`'use client'

import { ReactNode } from 'react'
import { ConvexReactClient } from 'convex/react'
import { ConvexProviderWithClerk } from 'convex/react-clerk'
import { useAuth } from '@clerk/nextjs'

if (!process.env.NEXT_PUBLIC_CONVEX_URL) {
throw new Error('Missing NEXT_PUBLIC_CONVEX_URL in your .env file')
}

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL)

export default function ConvexClientProvider({ children }: { children: ReactNode }) {
const auth = useAuth();
return (
<ConvexProviderWithClerk client={convex} useAuth={() => auth}>
{children}
</ConvexProviderWithClerk>
)
}`

#

And here is my layout.tsx

`tsx
import type { Metadata } from "next";
import localFont from "next/font/local";
import { ClerkProvider } from '@clerk/nextjs'
import ConvexClientProvider from '@/components/ConvexClientProvider';
import "./globals.css";

const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});

export const metadata: Metadata = {
title: "Contests Platform",
description: "Custom sports contests platform for companies",
};

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={${geistSans.variable} ${geistMono.variable} antialiased}
>
<ClerkProvider dynamic>
<ConvexClientProvider>
{children}
</ConvexClientProvider>
</ClerkProvider>
</body>
</html>
);
}
`

tropic prism Jul 23, 2025, 6:17 PM

#

Maybe your path alias works for TypeScript but not at runtime and ConvexClientProvider is actually undefined in layout.tsx

pearl vigil Jul 23, 2025, 6:18 PM

#

tropic prism Maybe your path alias works for TypeScript but not at runtime and ConvexClientPr...

So how can I fix that?

#

it seems something like that is the issue since it is saying it cannot find the right class based on the name

tropic prism Jul 23, 2025, 6:19 PM

#

It's saying ConvexClientProvider == undefined

#

looking at how nextjs path alias is defined

#

Can you share your tsconfig.json

pearl vigil Jul 23, 2025, 6:23 PM

#

{ "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./src/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] }

tropic prism Jul 23, 2025, 6:24 PM

#

Can you try just using a relative import instead of the path alias

pearl vigil Jul 23, 2025, 6:25 PM

#

I cleared the .next cache and restarted that didn't fix

#

I copied the examples exactly, so i am not sure why this is an issue

tropic prism Jul 23, 2025, 7:08 PM

#

Can you try just using a relative import instead of the path alias

#

The point here is determining what the issue is

pearl vigil Jul 23, 2025, 7:08 PM

#

I did that and it didn't work

tropic prism Jul 23, 2025, 7:08 PM

#

Next step is, while importing via relative path, log the imported component. Can you share the import/log code and the output?

pearl vigil Jul 23, 2025, 7:10 PM

#

import type { Metadata } from "next";
import localFont from "next/font/local";
import { ClerkProvider } from '@clerk/nextjs'
import ConvexClientProvider from '../components/ConvexClientProvider';
import "./globals.css";

const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});

export const metadata: Metadata = {
title: "Contests Platform",
description: "Custom sports contests platform for companies",
};

console.log(ConvexClientProvider);

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={${geistSans.variable} ${geistMono.variable} antialiased}
>
<ClerkProvider dynamic>
<ConvexClientProvider>
{children}
</ConvexClientProvider>
</ClerkProvider>
</body>
</html>
);
}

#

The output of the log statement is {}

tropic prism Jul 23, 2025, 7:14 PM

#

Well it's clearly not undefined, so that's weird

pearl vigil Jul 23, 2025, 7:14 PM

#

yeah when i print the clerkprovider, it is an AsyncFunction

tropic prism Jul 23, 2025, 7:15 PM

#

What happens if you drop ClerkProvider

#

I know it'll cause things to break further down the tree, but I'm curious if the error about ConvexClientProvider goes away

#

I also wonder if maybe the dynamic rendering on the ClerkProvider isn't playing nice with the client provider

pearl vigil Jul 23, 2025, 7:17 PM

#

The error still persists when I remove the ClerkProvider

#

Like at this point to I just drop clerk? I like using clerk and this is the first time using convex, so annoying that there is this hiccup

tropic prism Jul 23, 2025, 7:27 PM

#

If you dropped the clerk provider and it's still happening I'm not sure Clerk is the problem

#

Is this a project you just started, like something you could put up as a public repo so I can take a look?

pearl vigil Jul 23, 2025, 7:28 PM

#

Its in a monorepo that's private, I could copy the code to a public repo quick give me 2 mins

tropic prism Jul 23, 2025, 7:28 PM

#

Yeah if you can provide a minimal repro I'll take a look

pearl vigil Jul 23, 2025, 7:28 PM

#

I don't want to include my keys for convex or clerk and you can still take a look?

#

https://github.com/DylanZeller/test-contests# @tropic prism

GitHub

GitHub - DylanZeller/test-contests

Contribute to DylanZeller/test-contests development by creating an account on GitHub.

pearl vigil Jul 28, 2025, 12:33 PM

#

@tropic prism Did you figure this out by chance? it is still a huge issue for me

pearl vigil Jul 28, 2025, 1:07 PM

#

i figured out how to fix it:

// Dynamically import ConvexClientProvider to ensure it is only rendered on the client side
const ConvexClientProvider = dynamic(
() => import("../components/ConvexClientProvider"),
{ ssr: false }
);

#

makes sure the convexclientprovider is dynamic and only tries to render in client side

tropic prism Jul 28, 2025, 3:21 PM

#

I completely missed your response with the repo 🤦‍♂️ sorry about that. I haven’t heard of someone needing to do this before! Glad it’s working for you though. Need to take at look at some point to understand what happened here.

#Issue with Clerk Setup With Convex