#SOLVED React can't read serverSideProps object return

41 messages · Page 1 of 1 (latest)

worldly iris
#

getting the error Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. , i have the api fetch awaited and res.json() awaited, still getting this error. had the same code with vite and react-router and didnt get an error. any idea why this is?

shy pivot
#

Need more code but it sounds like you're returning a promise that resolves to the props, but not the props themselves

worldly iris
shy pivot
#

Yeah typeof getServerSideProps is incorrect

#

I'm guessing. I'm not exactly sure what the Infer generic is.

slate heath
worldly iris
# 
export const getServerSideProps = async (context: any) => {
  let cookie: any
  let data: stat_banner_user
  if (context.req.cookies['osu_user']) {
    cookie = context.req.cookies['osu_user']
    console.log(cookie)
    // const user = await handler(cookie)
    const res = await fetch(`${base}/user/${cookie}`)
    data = await res.json()
    console.log(data)
  }
  else {
    data = { osu_auth: false, osu_id: 0 }
  }

  return { props: {data} }
}

export default async function Home({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) {
  // use returned data in return ()
}
slate heath
#

that error should be coming from your component

#

what you see if you console.log(data) in home ?

worldly iris
#

the fetched api data

slate heath
#

should be something wrong with the component you are rendering

shy pivot
#

Cant you just provide the whole code not parts of it?

worldly iris
slate heath
#

what does loadFull function return?

#

and particlesLoaded didn't return anything and you passing it to Particles component

#

particlesInit didn't return anything too

worldly iris
#

i just copied it from the react-tsparticles package page

slate heath
#

how does Particles component look like?

worldly iris
#

particle background

slate heath
#

ok

#

can you try comment out the Particles component to see if the error goes away

#

also you don't need html and body tag in the page component

worldly iris
#

still returns the same error

slate heath
#

ok uncomment it and comment out the ThemeProvider

#

wait

worldly iris
#

same erorr

slate heath
#

remove async here

worldly iris
#

that does it

slate heath
#

yea

#

page component can't be an async function

#

unless you are using server component with app dir

worldly iris
#

gotcha, thank you!

#

also do you know if next has a router outlet component?

slate heath
#

no

#

if you want to persist UI, you can create an Layout component and use it on every page

worldly iris
#

alrighty

#

thank you!