getServerAuthSession at any place crashes my app. 5000+ errors per second!

Below, I have my server component for rendering a hamburger menu based on whether the user is authenticated.

const SidebarMobile = async () => {
    const session = await getServerAuthSession();

    return session && session.user ? (
        <Sheet>
        ...
        </Sheet>
    ) : null;
};

const SidebarMobile = async () => {
    const session = await getServerAuthSession();

    return session && session.user ? (
        <Sheet>
        ...
        </Sheet>
    ) : null;
};

When I check the Network tab, main-app.js stays in an endless waterfall of downloading content. When I check the Console tab, this error is raised infinitely. It raises this error around 5.000 per second!

Uncaught (in promise) Error: Invariant: Method expects to have requestAsyncStorage, none available
    at headers (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.4.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/headers.js:36:15)
    at getServerSession (webpack-internal:///(app-client)/./node_modules/.pnpm/next-auth@4.22.1_next@13.4.3_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:145:35)

Uncaught (in promise) Error: Invariant: Method expects to have requestAsyncStorage, none available
    at headers (webpack-internal:///(app-client)/./node_modules/.pnpm/next@13.4.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/headers.js:36:15)
    at getServerSession (webpack-internal:///(app-client)/./node_modules/.pnpm/next-auth@4.22.1_next@13.4.3_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:145:35)

The server console seems fine with no erros at all.

- event compiled client and server successfully in 491 ms (2993 modules)
[next-auth][warn][EXPERIMENTAL_API]
`getServerSession` is used in a React Server Component.
https://next-auth.js.org/configuration/nextjs#getServerSession}
https://next-auth.js.org/warnings#EXPERIMENTAL_API

- event compiled client and server successfully in 491 ms (2993 modules)
[next-auth][warn][EXPERIMENTAL_API]
`getServerSession` is used in a React Server Component.
https://next-auth.js.org/configuration/nextjs#getServerSession}
https://next-auth.js.org/warnings#EXPERIMENTAL_API

Could anyone please explain to me what's going on or what I'm implementing wrong?

iukea•322d ago

Just out of curiosity 5.0 or 5,000?

niels•322d ago

What do you mean? Might've made a mistake while writing haha. But it raises around 5 thousand errors per second. Hmm I've somehow fixed it. I guess because I was importing this server component into a client component.. read the docs and it said you should give server components as props to client components that worked Now I'm only left with this TS error

'SidebarMobile' cannot be used as a JSX component.
  Its return type 'Promise<Element | null>' is not a valid JSX element.
    Type 'Promise<Element | null>' is missing the following properties from type 'ReactElement<any, any>': type, props, key

'SidebarMobile' cannot be used as a JSX component.
  Its return type 'Promise<Element | null>' is not a valid JSX element.
    Type 'Promise<Element | null>' is missing the following properties from type 'ReactElement<any, any>': type, props, key

Noobkun•322d ago

const SidebarMobile = ({ session }) => {
  return session && session.user ? (
    <Sheet>
      {/* ... */}
    </Sheet>
  ) : null;
};

// Usage in your code
const MyComponent = () => {
  const [session, setSession] = useState(null);

  useEffect(() => {
    const fetchSession = async () => {
      const session = await getServerAuthSession();
      setSession(session);
    };

    fetchSession();
  }, []);

  return (
    <div>
      {/* ... */}
      <SidebarMobile session={session} />
      {/* ... */}
    </div>
  );
};

const SidebarMobile = ({ session }) => {
  return session && session.user ? (
    <Sheet>
      {/* ... */}
    </Sheet>
  ) : null;
};

// Usage in your code
const MyComponent = () => {
  const [session, setSession] = useState(null);

  useEffect(() => {
    const fetchSession = async () => {
      const session = await getServerAuthSession();
      setSession(session);
    };

    fetchSession();
  }, []);

  return (
    <div>
      {/* ... */}
      <SidebarMobile session={session} />
      {/* ... */}
    </div>
  );
};