I am using use function of react in nextjs v13 and it give errors.

Unanswered

Huntaway posted this in #help-forum

HuntawayOP

2023-09-06T18:03:33.000Z

Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

71 Replies

Original message was deleted

HuntawayOP

2023-09-06T18:05:13.000Z

"use client";

import { use } from 'react';
import { getSessionData } from '@/lib/functions';

const newData = use(getSessionData());

European sprat

2023-09-06T18:06:04.000Z

show the full code

@European sprat show the full code

HuntawayOP

2023-09-06T18:08:11.000Z

this is full codes

functions.js

import { getServerSession } from 'next-auth/next';
import authOptions from "./authOptions";

export async function getSessionData() {
    const session = await getServerSession(authOptions);
    if (!session) return {
        data: null,
    };
    return {
        data: session.user.info,
    }
}

@Huntaway js "use client"; import { use } from 'react'; import { getSessionData } from '@/lib/functions'; const newData = use(getSessionData());

idan

2023-09-06T18:12:51.000Z

Where is the component itself?

You can't use hooks outside of a React component

@idan Where is the component itself?

HuntawayOP

2023-09-06T18:13:35.000Z

idan

2023-09-06T18:14:02.000Z

ok and what error does it give you?

the same error as before?

@idan ok and what error does it give you?

HuntawayOP

2023-09-06T18:14:24.000Z

Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

Source

src/app/dashboard/page.js (12:24) @ getSessionData

  10 | 
  11 | export default function Dashboard() {
> 12 | const newData = use(getSessionData());
     |                    ^
  13 | console.log(newData);
  14 | const { data: session } = useSession();
  15 | let dataGuild;

Show collapsed frames

idan

2023-09-06T18:14:31.000Z

probably because you're using getSessionData which is a function that uses async.

HuntawayOP

2023-09-06T18:14:54.000Z

without it how can we fetch

idan

2023-09-06T18:15:17.000Z

using the use hook.

HuntawayOP

2023-09-06T18:15:25.000Z

hmmk

idan

2023-09-06T18:15:26.000Z

that's what i'm trying to tell you, you shouldn't use await or async in client components.

HuntawayOP

2023-09-06T18:16:15.000Z

Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

Source
src/lib/functions.js (6:25) @ getServerSession

  4 | 
  5 | export function getSessionData() {
> 6 | const session =  use(getServerSession(authOptions));
    |                     ^
  7 | if (!session) return {
  8 |     dataGuild: null,
  9 | };
Call Stack
getSessionData
src/app/dashboard/page.js (12:38)

hmm

idan

2023-09-06T18:17:13.000Z

do you have any other functions in that file that use async or await?

HuntawayOP

2023-09-06T18:17:21.000Z

nop

export default function Dashboard() {
    const newData = use(getSessionData());
    console.log(newData);
    const { data: session } = useSession();
    let dataGuild;
    if (!session) {
        dataGuild = null;
    } else {
        dataGuild = session.user.guilds;
    }

see

idan

2023-09-06T18:18:17.000Z

i meant in the getSessionData function's file

are there any other functions?

European sprat

2023-09-06T18:18:23.000Z

https://next-auth.js.org/getting-started/client

why aren't you using useSession() in the client component?

idan

2023-09-06T18:18:47.000Z

he probably wants to get the data using the server

@European sprat why aren't you using useSession() in the client component?

HuntawayOP

2023-09-06T18:18:48.000Z

we can

idan

2023-09-06T18:19:05.000Z

useSession is for client side rendering

if you don't care, use it

European sprat

2023-09-06T18:19:29.000Z

and his dashboard page is already a client component

@idan he probably wants to get the data using the server

HuntawayOP

2023-09-06T18:19:32.000Z

yup because useSession give delay

@European sprat and his dashboard page is already a client component

idan

2023-09-06T18:19:58.000Z

a client component isn't client side rendering though

European sprat

2023-09-06T18:20:43.000Z

i don't understand what you're getting at

all i'm saying is, his dashboard page is a client component so he should use the next-auth provided hook for sessions not try and make something up

HuntawayOP

2023-09-06T18:20:46.000Z

that issue solved now

Unhandled Runtime Error
Error: Invariant: headers() expects to have requestAsyncStorage, none available.

Unhandled Runtime Error
Error: Invariant: headers() expects to have requestAsyncStorage, none available.

Source
src/lib/functions.js (6:42) @ authOptions

  4 | 
  5 | export async function getSessionData() {
> 6 | const session =  use(getServerSession(authOptions));
    |                                      ^
  7 | if (!session) return {
  8 |     dataGuild: null,
  9 | };
Call Stack
getSessionData
src/app/dashboard/page.js (12:34)
div
src/app/dashboard/page.js (111:25)
Show collapsed frames

European sprat

2023-09-06T18:23:00.000Z

probably because you're still trying to use a server only function in a client component with an experimental hook

@European sprat i don't understand what you're getting at all i'm saying is, his dashboard page is a client component so he should use the next-auth provided hook for sessions not try and make something up

idan

2023-09-06T18:23:12.000Z

useSession should be used if you want the user to see loading states. getServerSession should be used if you want to load the user session using server-side rendering, which is helpful in cases where you don't want the user to experience delays.

European sprat

2023-09-06T18:24:02.000Z

i'm completely aware of when to use getServerSession. i'm saying he's using it in a client component which is why this isn'tw orking

idan

2023-09-06T18:25:19.000Z

Yep, so basically, if you want to load the user's session using the server, you need to remove that 'use client' and make all your clickable buttons a separate component.

HuntawayOP

2023-09-06T18:25:40.000Z

ik but i am confuses about it hmmm

idan

2023-09-06T18:26:24.000Z

why would you be confused? just create a separate client component and put there all your buttons or input fields

@idan why would you be confused? just create a separate client component and put there all your buttons or input fields

HuntawayOP

2023-09-06T18:27:23.000Z

how can we pass data like props?

to components

idan

2023-09-06T18:27:33.000Z

just like you did before

@idan just like you did before

HuntawayOP

2023-09-06T18:30:35.000Z

like this i need to make multiple compoenets

cuz dashboard have many pages

idan

2023-09-06T18:31:41.000Z

I know

that is how it works if you wanna use the app router.

you can always go back to the pages router

HuntawayOP

2023-09-06T18:32:16.000Z

i am using app router for future ideas

and here i get stuck for this issue

idan

2023-09-06T18:32:35.000Z

you shouldn't get stuck though

HuntawayOP

2023-09-06T18:32:40.000Z

like a time come where page route stop updates by devs

and we need to shift app

idan

2023-09-06T18:32:54.000Z

yeah i understand

i don't think it will happen anytime soon, but i understand what you're saying

HuntawayOP

2023-09-06T18:33:16.000Z

hmm bro

: /

almost page done

idan

2023-09-06T18:33:27.000Z

i would just create a separated component for client stuff

HuntawayOP

2023-09-06T18:33:27.000Z

but i am stuck this place

idan

2023-09-06T18:33:33.000Z

that's the only solution

HuntawayOP

2023-09-06T18:33:40.000Z

i think they should make function for this

idan

2023-09-06T18:33:46.000Z

it's either that or you just use useSession and load the session in the client

HuntawayOP

2023-09-06T18:33:46.000Z

so we can make to use it easy

@idan it's either that or you just use `useSession` and load the session in the client

HuntawayOP

2023-09-06T18:34:08.000Z

ik but it make more complicated

idan

2023-09-06T18:34:17.000Z

yeah i understand, i build dashboards

i just create a separate component for client stuff, and it works flawlessly

it might seems like more work at first, but it makes things a lot more easier to read and maintain.

pro tip: use folders

HuntawayOP

2023-09-07T16:00:42.000Z

@idan so basically i make components by idk why i can't get this dats in page props

import { getSessionData } from "@/lib/functions";
import DashboardMainComponent from "@/dashComponents/main";

export default async function Dashboard() {
    const data = await getSessionData();
    <DashboardMainComponent dataGuild={data.dataGuild} />
}