Dzondzi
Dzondzi2y ago

develop

⨯ node_modules/convex/dist/esm/react/ConvexAuthState.js (13:10) @ useConvexAuth ⨯ Error: Could not find ConvexProviderWithAuth (or ConvexProviderWithClerk or ConvexProviderWithAuth0) as an ancestor component. This component may be missing, or you might have two instances of the convex/react module loaded in your project. at Header (Header.tsx:20:103)
7 Replies
ian
ian2y ago
What does your code look like that configures the ConvexProvider?
Dzondzi
DzondziOP2y ago
"use client"; import { ReactNode } from "react"; import { ConvexReactClient } from "convex/react"; import { ConvexProviderWithClerk } from "convex/react-clerk"; import { ClerkProvider, useAuth } from "@clerk/clerk-react"; const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!); export const ConvexClientProvider = ({ children }: { children: ReactNode; }) => { return ( <ClerkProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!} > <ConvexProviderWithClerk useAuth={useAuth} client={convex} > {children} </ConvexProviderWithClerk> </ClerkProvider> ); }; "use client"; import { useConvexAuth } from "convex/react"; import { SignInButton, UserButton } from "@clerk/clerk-react"; import React, { useEffect } from "react"; import { useLocalStorage } from "usehooks-ts"; const Header = () => { //we store the theme in localStorage to preserve the state on next visit with an initial theme of dark. const [theme, setTheme] = useLocalStorage("theme", "dark"); const { isAuthenticated, isLoading } = useConvexAuth();
ian
ian2y ago
And the header is a child of the convex provider?
Dzondzi
DzondziOP2y ago
Ohhh Wait let me try 😄
ian
ian2y ago
As in, somewhere you have <ConvexClientProvider> …stuff Where Header is in stuff
Dzondzi
DzondziOP2y ago
Yes That was the problem Sorry for bothering you
ian
ian2y ago
Glad you figured it out!

Did you find this page helpful?