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/[email protected][email protected][email protected]/node_modules/next/dist/client/components/headers.js:36:15)
    at getServerSession (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/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/[email protected][email protected][email protected]/node_modules/next/dist/client/components/headers.js:36:15)
    at getServerSession (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/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?

10 Replies

iukea•2y ago

Just out of curiosity 5.0 or 5,000?

nielsOP•2y 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•2y 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>
  );
};

nielsOP•2y ago

Defeats the server auth a bit no?

iukea•2y ago

Not damn

Noobkun•2y ago

I'm new too ^^' sorry if it wasn't helpfull

nielsOP•2y ago

Dont worry, I'm no expert either haha

iukea•2y ago

Bro I am just trying to suck less

nielsOP•2y ago

Same

Liam•2y ago

Is this in the app directory or pages directory?

Gaming

Programming

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