"Context" is not a function

Answered

`icey tea dev` posted this in #help-forum

`icey tea dev`OP

2023-12-26T16:43:59.000Z

I've setup my own sessionContext (without nextAuth) to give my clientside access to user elements such as email and role.
However, I'm getting the following error:

Error: (0 , _contexts_SessionProvider__WEBPACK_IMPORTED_MODULE_1__.useSession) is not a function

My exports for useSession are as follows:

export const useSession = () => {
  const context = useContext(AuthContext);

  if (!context) {
    throw new Error("useSession must be used within a SessionProvider");
  }

  return context;
};

export default SessionProvider;

I'm importing it like this:

import { useSession } from "../../../contexts/SessionProvider";

My imports are correct (as I'm getting autocomplete), so I'm unsure why it's saying it's not a function.
I also attached my file structure if that helps.

Answered by Ray

hook cannot be use in a server component

View full answer

18 Replies

Ray

2023-12-26T16:48:19.000Z

where do you use the useSession hook?

`icey tea dev`OP

2023-12-26T16:49:00.000Z

I use it in a rooted layout

import { useSession } from "../../../contexts/SessionProvider";
import { Roles } from "@/types";
import { redirect } from "next/navigation";

export default function AdminLayout({
  children, // will be a page or nested layout
}: {
  children: React.ReactNode;
}) {
  const { isSignedIn, user, reload } = useSession();
  reload();

  return (
    <section>
      {isSignedIn && user
        ? user.role == Roles.ADMIN
          ? children
          : redirect("/not-authorized")
        : redirect("/not-authorized")}
    </section>
  );
}