Using Server components and error Only plain objects can be passed to Client Components from Server

Answered

North Pacific hake posted this in #help-forum

North Pacific hakeOP

2024-02-05T01:42:52.000Z

Steps:
1. Create NextJS 14 app with create next app latest.
2. Go in page.js
3. Add Jikan API client and output string to component
4. Error: 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.

What? My components are on the server, which I've verified to be true. What is this error?

Answered by Ray

you didn't await the promise i think
var see = await printAnime(6);

View full answer

44 Replies

@North Pacific hake Steps: 1. Create NextJS 14 app with create next app latest. 2. Go in page.js 3. Add Jikan API client and output string to component 4. Error: 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. What? My components are on the server, which I've verified to be true. What is this error?

aardani

2024-02-05T03:42:29.000Z

Do you have code snippet?

North Pacific hakeOP

2024-02-05T05:57:13.000Z

page.js

import Image from "next/image";
import styles from "./page.module.css";
import Jikan from 'jikan4.js'


export default function Home() {

  console.log('Server only');
  const f = typeof window === 'undefined';
  console.log(f);
  const client = new Jikan.Client();
   async function printAnime (id) {
     const anime = await client.anime.get(id);
     return anime.title;
  }
  
   var see = printAnime(6);

  return (
    <main className={styles.main}>
      {see}
    </main>
  );
}

its not so much the api thing, im just utterly confused that this is even possible to be an error in nextjs. this type of code in c# or something would never be a problem.

@North Pacific hake page.js `import Image from "next/image"; import styles from "./page.module.css"; import Jikan from 'jikan4.js' export default function Home() { console.log('Server only'); const f = typeof window === 'undefined'; console.log(f); const client = new Jikan.Client(); async function printAnime (id) { const anime = await client.anime.get(id); return anime.title; } var see = printAnime(6); return ( <main className={styles.main}> {see} </main> ); }`

aardani

2024-02-05T06:00:29.000Z

{see} might be a class, not a pure object.

it would still a problem in any other language since you are passing object between server and client

data has to be serializable

North Pacific hakeOP

2024-02-05T06:04:02.000Z

this is what i hate about javascript

i thought this is a string

isnt it a string though?

Also what do u mean passing object between server and client, this is a server component. doesnt it render the html on server and thats it, what is it doing client side

@North Pacific hake i thought this is a string

aardani

2024-02-05T06:09:54.000Z

is it a string?

have you console.log it?

Error: 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.

Can you send full error message?

Ray

2024-02-05T06:14:02.000Z

you didn't await the promise i think
var see = await printAnime(6);

Answer

North Pacific hakeOP

2024-02-05T06:15:28.000Z

ok so i think ur right about the await

also the thing is this

ContentTitle {
synonyms: [],
english: 'Trigun',
japanese: 'ãƒˆãƒ©ã‚¤ã‚¬ãƒ³',
german: null,
spanish: null,
french: null,
default: 'Trigun'
}

so its not a string

all of this garbage is avoided because im used to using Visual Studio and C#, an actual sane way to write code

Ray

2024-02-05T06:17:35.000Z

use typescript ðŸ˜†

North Pacific hakeOP

2024-02-05T06:17:43.000Z

yes so it works now

ive tried tpyescript

i was extremely disapointed in it

first of all it compiles to javascript which is insane to me

and second its obviously verbose and doesnt and cant ever have the level of IDE support as a statically typed language

anyway thanks guys, so this error was pretty misleading, the issue is not you cant have an object in your component logic, but that you cant have classes in your html, in my mind the output should be either null or object{} appearing on the page not this shitty error

aardani

2024-02-05T06:23:47.000Z

you also can't have an object in your component logic

it doesnt know what to do

unless you stringify it

North Pacific hakeOP

2024-02-05T06:24:11.000Z

but i mean in the function you can

i literally do in this code

but not in the return part

aardani

2024-02-05T06:24:33.000Z