Cannot Make UserProvider Work In Root Layout #62420

rmartin93 · 2024-02-23T00:20:52Z

rmartin93
Feb 23, 2024

Summary

This UserProvider (found in the layout.tsx file below, works just fine if I put it in the Home page at app > page.tsx

As soon as I try to move it to the app > layout.tsx file I get an error.

Error:

 ⨯ app\page.tsx (10:35) @ useUserContext
 ⨯ TypeError: (0 , _app_context_userContext__WEBPACK_IMPORTED_MODULE_4__.useUserContext) is not a function
    at Home (./app/page.tsx:21:94)
    at stringify (<anonymous>)
digest: "3199890372"

app > layout.tsx

import type { Metadata } from "next";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-icons/font/bootstrap-icons.css";
import "./globals.css";
import ImportBsJs from "./_lib/ImportBsJs";
import NavBar from "./_components/nav/NavBar";
import { ClerkProvider } from "@clerk/nextjs";
import SideBar from "./_components/nav/SideBar";

import UserProvider from "./_context/userContext";
import checkUserExists from "./_utils/checkUserExists";

export const metadata: Metadata = {
    title: "iLandscape",
    description: "An app for managing landscaping work.",
};

export default async function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    const userFromDB = await checkUserExists();
    console.log("userFromDB", userFromDB);
    return (
        <ClerkProvider>
            <html lang="en">
                <body className="sidebar-open" data-bs-theme="light">
                    <UserProvider userFromDB={userFromDB}>
                        <ImportBsJs />
                        <NavBar />
                        <SideBar />
                        <main className="py-3">{children}</main>
                    </UserProvider>
                </body>
            </html>
        </ClerkProvider>
    );
}

app > page.tsx

import { Suspense } from "react";
import OrgChooser from "./_components/home/OrgChooser";
import OrgChooserSkeleton from "./_components/home/OrgChooserSkeleton";
import { useUserContext } from "@/app/_context/userContext";

export default async function Home() {
    const { user } = useUserContext();
    return (
        <div className="container-fluid">
            <div className="row">
                <div className="col-12">
                    <h3 className="mb-4">Hello {user?.first_name}</h3>
                    <Suspense fallback={<OrgChooserSkeleton />}>
                        <OrgChooser />
                    </Suspense>
                </div>
            </div>
        </div>
    );
}

app > _context > userContext.tsx

"use client";
import { addUserResponse } from "@/app/_types/Users";
import {
    createContext,
    useState,
    useMemo,
    SetStateAction,
    Dispatch,
    useContext,
} from "react";

type Context = {
    user: addUserResponse | null;
    setUser: Dispatch<SetStateAction<addUserResponse | null>>;
};

export const UserContext = createContext<Context | null>(null);

export default function UserProvider({
    userFromDB,
    children,
}: {
    readonly userFromDB: addUserResponse | null;
    readonly children: React.ReactNode;
}) {
    // Set the user to the user from the database
    const [user, setUser] = useState<addUserResponse | null>(userFromDB);
    const contextValue = useMemo(() => ({ user, setUser }), [user, setUser]);

    // Return the user context
    return (
        <UserContext.Provider value={contextValue}>
            {children}
        </UserContext.Provider>
    );
}

export function useUserContext() {
    const context = useContext(UserContext);
    if (context === null) {
        throw new Error("useUserContext must be used within a UserProvider");
    }
    // Return the user and setUser methods from the context
    return context;
}

If I missed any files that you guys need to help me please let me know. I am hard stuck on this and I have no idea what to do.

Additional information

No response

Example

No response

icyJoseph · 2024-02-23T07:31:08Z

icyJoseph
Feb 23, 2024
Collaborator

Hi,

Unfortunately, AFAIK, Context is a use client thing only, meaning that it is not accessible within server components, such as your page.

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers

Context providers are typically rendered near the root of an application to share global concerns, like the current theme. Since React context is not supported in Server Components, trying to create a context at the root of your application will cause an error.

Though in your case there's a rather quick fix:

'use client'
// other imports

export const UserHeader = (/* Maybe some styling props? classNames and such? */) => {
    const { user } = useUserContext(); // you can read context here
    return (<h3 className="mb-4">Hello {user?.first_name}</h3>)
}

And then use UserHeader within your Home component:

export default async function Home() {
    return (
        <div className="container-fluid">
            <div className="row">
                <div className="col-12">
                    <UserHeader />
                    <Suspense fallback={<OrgChooserSkeleton />}>
                        <OrgChooser />
                    </Suspense>
                </div>
            </div>
        </div>
    );
}

And that should do the trick.

0 replies

Navigation Menu

Uh oh!

Cannot Make UserProvider Work In Root Layout #62420

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Cannot Make UserProvider Work In Root Layout #62420

Uh oh!

rmartin93 Feb 23, 2024

Summary

Additional information

Example

Replies: 1 comment

Uh oh!

Uh oh!

icyJoseph Feb 23, 2024 Collaborator

rmartin93
Feb 23, 2024

icyJoseph
Feb 23, 2024
Collaborator