Warning: Only plain objects can be passed to Client Components from Server Components

Question

I have created an app to be able to search care homes on a map and add new ones through a form.

Background: Everything worked in dev mode but in production the map was not refreshing to include the newly added care homes.The api to fetch the care home data was running at build time and after that subsequent requests return the same data ie don't include new data. (I don't understand why that was happening)

As a solution I used a server action to get the carehome data and return it to the client map component.

Now I am getting an warning saying that Only plain objects can be passed to Client Components from Server Components. Objects with toJSON methods are not supported. Convert it manually to a simple value before passing it to props.

If you have any ideas why an api would only run at build time or how I can solve this warning I would really appreciate it. I am relatively beginner with next.js and development in general so apologies if this is not clear.

link to repo: https://github.com/niallam22/lottie/blob/main/src/app/components/careHomeMap.jsx

_actions.js

export async function getCareHomes(){
  try {
    await connectMongoDB();
    const careHomes = await CareHome.find();
    console.log('api/carehome careHomes: ',careHomes);
    // Return the list of care homes in the response
    return careHomes;
  } catch (error) {
    // Handle any errors that occur during the query
    console.error('Error:', error);
    
    // Return an error response
    return { message: 'Error fetching care homes' };
  }
}

'use client'

import { useEffect, useState } from "react";
import { getCareHomes } from '../_actions'


export default function CareHomeMap({ map, home }) {
  const [careHomeData, setCareHomeData] = useState();

  useEffect(()=>{
    try {
        getCareHomes().then(data =>{
          setCareHomeData(data)
        })

        // fetchCareHomes().then(data =>{
        //   setCareHomeData(data)
        // })
    } catch (error) {
      console.log(error)
    }
  },[])

Answer 1

you should before passing data to page for use data, convert to string and so to json

  const data = JSON.parse(JSON.stringify(sampleData))