RangeError: Maximum call stack size exceeded NEXTJS

Question

I'm still a beginner in Nextjs I get range error when i try to fetch products from database, ihave the same exact code for categories with no problem at all...

this my nextjs server action:

export async function getProducts() {
try {
connectToDB();
return await Product.find({});
} catch (error: any) {
throw new Error(`Failed to catch products : ${error.message}`);
}
}

this is from my client side:

const getAllProducts = async () => {
try {
  const response = await getProducts();
  console.log('response: ', response);
  setProducts(response);
} catch (error) {
  console.log(error);
} useEffect(() => {
getAllProducts()}, []);

can someone tell me whats wrong here i see no loops and i have the same exact code literally for categories section no problems at all

Answer 1

Within Nextjs 13/14, the "Maximum call stack size exceeded" error usually comes from a mismatch between server and client components.

In this case, it seems your server action likely isn't returning a plain object (which is a requirement), and can throw this error.

Another common cause of this error is rendering a server component as a child of a client component.