Issue with Clerk Setup With Convex
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...
25 Replies
Can you share the file with ConvexClientProvider
'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>
);
}
Maybe your path alias works for TypeScript but not at runtime and ConvexClientProvider is actually undefined in layout.tsx
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
It's saying ConvexClientProvider == undefined
looking at how nextjs path alias is defined
Can you share your tsconfig.json
{
"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"]
}
Can you try just using a relative import instead of the path alias
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
Can you try just using a relative import instead of the path alias
The point here is determining what the issue is
I did that and it didn't work
Next step is, while importing via relative path, log the imported component. Can you share the import/log code and the output?
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 {}
Well it's clearly not undefined, so that's weird
yeah when i print the clerkprovider, it is an AsyncFunction
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
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
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?
Its in a monorepo that's private, I could copy the code to a public repo quick give me 2 mins
Yeah if you can provide a minimal repro I'll take a look
I don't want to include my keys for convex or clerk and you can still take a look?
GitHub
GitHub - DylanZeller/test-contests
Contribute to DylanZeller/test-contests development by creating an account on GitHub.
@erquhart Did you figure this out by chance? it is still a huge issue for me
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
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.
No problem, when you get around to it let me know if there’s anything else you need from me