Next.js Discord

Discord Forum

Only plain objects can be passed to Client Components from Server Components when submitting data

Answered
Common carp posted this in #help-forum
Open in Discord
Common carpOP
Uncaught (in promise) Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.
    at D:\Projekty\pumpfit\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:278281
    at Object.toJSON (D:\Projekty\pumpfit\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:281132)
    at stringify (<anonymous>)
    at D:\Projekty\pumpfit\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:267488
    at ez (D:\Projekty\pumpfit\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:267567)
    at eH (D:\Projekty\pumpfit\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:267968)
    at Timeout._onTimeout (D:\Projekty\pumpfit\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:264466)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)
I am encoutering this error when i am updating data in my postgres database, using prisma. The updating functions looks similar to that: 
export const updateAccount = async ({
    name,
    email,
    photourl,
    accountId,
}: {
    name: string
    email: string
    photourl: string
    accountId: string
}) => {
    try {
        const account = await prisma.account.update({
            where: {
                id: accountId,
            },
            data: {
                name: name,
                email: email,
                photo: photourl,
            },
        })
        if (account) {
            return NextResponse.json({ account: { success: true }, message: 'Updated account info' }, { status: 201 })
        } else {
            return NextResponse.json({ message: 'Something went wrong!' }, { status: 500 })
        }
    } catch (error) {
        return NextResponse.json({ message: 'Something went wrong!' }, { status: 500 })
    }
}

Why is that? Can someone help me ?
Answered by Ray
You should return the object in with server action instead of NextResponse
View full answer

22 Replies

@Common carp Uncaught (in promise) Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported. at D:\Projekty\pumpfit\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:278281 at Object.toJSON (D:\Projekty\pumpfit\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:281132) at stringify (<anonymous>) at D:\Projekty\pumpfit\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:267488 at ez (D:\Projekty\pumpfit\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:267567) at eH (D:\Projekty\pumpfit\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:267968) at Timeout._onTimeout (D:\Projekty\pumpfit\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:264466) at listOnTimeout (node:internal/timers:573:17) at process.processTimers (node:internal/timers:514:7) I am encoutering this error when i am updating data in my postgres database, using prisma. The updating functions looks similar to that: TSX export const updateAccount = async ({ name, email, photourl, accountId, }: { name: string email: string photourl: string accountId: string }) => { try { const account = await prisma.account.update({ where: { id: accountId, }, data: { name: name, email: email, photo: photourl, }, }) if (account) { return NextResponse.json({ account: { success: true }, message: 'Updated account info' }, { status: 201 }) } else { return NextResponse.json({ message: 'Something went wrong!' }, { status: 500 }) } } catch (error) { return NextResponse.json({ message: 'Something went wrong!' }, { status: 500 }) } } Why is that? Can someone help me ?
Ray
could you show more code on where you call updateAccount?
Common carpOP
yeah sure
wait a moment
@Common carp yeah sure
Ray
oh wait
no need
@Common carp wait a moment
Ray
export const updateAccount = async ({
  name,
  email,
  photourl,
  accountId,
}: {
  name: string
  email: string
  photourl: string
  accountId: string
}) => {
  try {
      const account = await prisma.account.update({
          where: {
              id: accountId,
          },
          data: {
              name: name,
              email: email,
              photo: photourl,
          },
      })
      if (account) {
          return { account: { success: true }, message: 'Updated account info' }
      } else {
          return { message: 'Something went wrong!' }
      }
  } catch (error) {
      return { message: 'Something went wrong!' }
  }
}
Common carpOP
    const handleUpdateProfile = async (values: z.infer<typeof FormSchema>) => {
        const data = {
            name: values.name,
            email: values.email,
            photourl: values.photourl,
            accountId: accountData.id,
        }
        const response = await updateAccount(data)
        if (!response.ok) {
            console.log(response)
        } else {
            console.log('Created an announcement')
        }
    }
This is the function i am using to update profile
Ray
You should return the object in with server action instead of NextResponse
Answer
@Ray You should return the object in with server action instead of NextResponse
Common carpOP
Oh okay so that is the problem, Thank you so much i was fighting with it for a couple of days. Saw someone using NextResponse, and used it in sign in function and it worked
@Ray You should return the object in with server action instead of NextResponse
Common carpOP
Should I also change it in next-auth function?
@Common carp Should I also change it in next-auth function?
Ray
what is your next-auth function?
is it a server action ?
Common carpOP
It is sign in to account function
and also i use nextresponse in create account functions
Create account function
but that works well, no errors
Original message was deleted
Ray
this is route handler
so it should return NextResponse
@Ray this is route handler
Common carpOP
Okay thank you so much for explanation, I really appreciate it!