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
What does your code look like that configures the ConvexProvider?
"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();
And the header is a child of the convex provider?
Ohhh
Wait
let me try
😄
As in, somewhere you have <ConvexClientProvider>
…stuff
Where Header is in stuff
Yes
That was the problem
Sorry for bothering you
Glad you figured it out!