Unhandled Runtime ErrorError: Maximum call stack size exceeded

Unanswered

Horned oak gall posted this in #help-forum

Open in Discord

Horned oak gallOP

2023-12-12T23:58:55.000Z

In my nextjs app/page.tsx is using async fetching data, and I want to render data in a component, but within the component I would like to use "useSession" to filter data condition, but "useSession" only working in client side, When I add "use client" in the component however there is an error,
" Maximum call stack size exceeded,React from 'react'"

//app/page.tsx
import Image from 'next/image'
import Searchbar from '@/components/Searchbar'
import HeroCarousel from '@/components/HeroCarousel'
import { getAll } from '@/lib/actions'
import UserSession from '@/components/UserSession'
import DisplayCard from '@/components/DisplayCard'

const Home = async () => {
  const allProducts = await getAll()

  return (
     <>
     <section className="trending-section">
       <h2 className="section-text">We You Tracked</h2>
       <div className="flex flex-wrap justify-center gap-x-8 gap-y-16">
        {/* <DisplayMiddleWare productList={allProducts}/> */}
        {
          allProducts?.map((product)=>(

            <DisplayCard key={product._id} product={product}/>
          ))
        }
       </div>
     </section>
      <UserSession/>
   </>
  )
}
export default Home

//DisplayCard.tsx
"use client"
import { Product } from '@/types'
import Link from 'next/link'
import Image from 'next/image'
import React from 'react';
import { useSession } from 'next-auth/react';
interface Props {
  product: Product;
}
const DisplayCard = ({ product}: Props) => {
 const { status, data: session } = useSession();
 const isInList = session?.user?.search?.includes(product._id)
 return isInList ? (
    <Link href={`/products/${product._id}`} className="product-card">
      <div className='product-card_img-container border rounded-md overflow-hidden'>
       //the login to display data
      </div>
    </Link>
  ) : ''
}
export default DisplayCard

118 Replies

2023-12-13T12:51:27.000Z

In my nextjs app/page.tsx is using async fetching data, and I want to render data in a component, but within the component I would like to use "useSession" to filter data condition, but "useSession" only working in client side

Therefore you should create a client component on a different file, and delegate your client logic there.

Horned oak gallOP

2023-12-13T13:02:17.000Z

those are my latest code but still same bug, app/page.tsx

import Image from "next/image";
import Searchbar from "@/components/Searchbar";
import UserSession from "@/components/UserSession";
import HeroCarousel from "@/components/HeroCarousel";
import DisplayCardClient from "@/components/DisplayCardClient";
import { getAll } from '@/lib/actions';

const Home = async () =>{
  const allProducts = await getAll();
  return (
    <>
      <section className="px-6 md:px-20 py-24">
        <div className="flex max-xl:flex-col gap-16">
          <div className="flex flex-col justify-center">
            <p className="small-text">
              Always Make sure Lowest Price:
              <Image
                src="/assets/icons/arrow-right.svg"
                alt="arrow-right"
                width={16}
                height={16}
              />
            </p>

            <h1 className="head-text">
              Unleash the Power of
              <span className="text-primary"> PriceTracker</span>
            </h1>

            <p className="mt-6">
              Powerful, self-serve product and growth analytics to help you convert, engage, and retain more.
            </p>
            <Searchbar />
          </div>

          <HeroCarousel />
        </div>
      </section>
      <section className="trending-section">
        <h2 className="section-text">What You Tracked</h2>
        <div className="flex flex-wrap justify-center gap-x-8 gap-y-16">
            {allProducts?.map((product) => (
                <DisplayCardClient key={product._id} product={product} />
            ))}
        </div>
      </section>

      <UserSession />
    </>
  );
};

export default Home

2023-12-13T13:02:32.000Z

whats latest the error?

Horned oak gallOP

2023-12-13T13:02:51.000Z

Unhandled Runtime Error
Error: Maximum call stack size exceeded

Call Stack
String.replace
<anonymous>

like this

2023-12-13T13:02:58.000Z

thats a different error

the original issue is fixed

it could be any of your function

Horned oak gallOP

2023-12-13T13:03:34.000Z

I was stucked in the stack size error for 2 days ðŸ˜¢

"use server"
import { dbConn } from "../mongoose"; export async function getAll(){
    try{
        dbConn()
        const products = await Product.find()

        return products
    }catch(err){
        console.log(err)
    }
}

this is how I write the getAll()

Only if I passed in data receiving value from getAll() to "use client" component, then the error occur

@Horned oak gall Only if I passed in data receiving value from getAll() to "use client" component, then the error occur

2023-12-13T13:08:29.000Z

couldve told me this in the beginning.

Horned oak gallOP

2023-12-13T13:08:46.000Z

sorry

I have just tested the result

so, what do you think the error from ?

2023-12-13T13:10:15.000Z

try console logging allProducts

Horned oak gallOP

2023-12-13T13:13:16.000Z

originally printed some

then

2023-12-13T13:13:41.000Z

hmmmm

try this

            {allProducts?.map((product) => (
                <div>test</div>
            ))}

Horned oak gallOP

2023-12-13T13:14:49.000Z

yeah, working

If I pass value but the component not using "use client" then no this error

2023-12-13T13:17:33.000Z

ok

then

we must see whats inside DislpayCardClient

Horned oak gallOP

2023-12-13T13:18:40.000Z

"use client"

import { Product } from '@/types'
import Link from 'next/link'
import Image from 'next/image'

interface Props {
  product : Product
}
const DisplayCard = ({product}:Props) => {

 return (
    <Link href={`/products/${product._id}`} className="product-card">
      <div className='product-card_img-container border rounded-md overflow-hidden'>
        <Image
          src={product.image}
          alt={product.title}
          width={200}
          height={200}
          className='product-card_img'
        />
      </div>
      <div className='flex flex-col gap-3'>
        <h3 className='product-title'>{product.title}</h3>
        <div className='flex justify-between'>
          <p className='text-black opacity-50 text-lg capitalize'>
            {product.category}
          </p>
          <p className='text-black text-lg font-semibold'>
            <span>{product?.currency}</span>
            <span>{product?.currentPrice}</span>
          </p>
        </div>
      </div>
    </Link>
  )
}
export default DisplayCard

tsx

2023-12-13T13:19:13.000Z

can you use codeblock?

Horned oak gallOP

2023-12-13T13:19:14.000Z

This is the DisplayCard, it is working if I don't use "use client" at top

2023-12-13T13:19:19.000Z

```tsx
paste code here
```

Horned oak gallOP

2023-12-13T13:19:25.000Z

ok

2023-12-13T13:19:56.000Z

with tsx

after the triple backtick, not under it

like this
```tsx

Horned oak gallOP

2023-12-13T13:21:00.000Z

damn

I am stupid

ok

@Horned oak gall then

2023-12-13T13:22:00.000Z

nice

good news

ur Client component isnt the problem

Horned oak gallOP

2023-12-13T13:22:18.000Z

nice

@Horned oak gall then

2023-12-13T13:22:21.000Z

this is might be the problem

can you try console.logging allProducts.length

Horned oak gallOP

2023-12-13T13:23:52.000Z

ts const allProducts = await getAll();
 console.log("From app/next.tsx", allProducts?.length)

From app/next.tsx 2
Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <div>
From app/next.tsx 2

2023-12-13T13:25:19.000Z

2 only?

what the hecc ðŸ˜

Horned oak gallOP

2023-12-13T13:26:10.000Z

So, that was really weird bug

ðŸ˜¢

2023-12-13T13:26:26.000Z

can you paste the whole log of console.log allProducts

oh wait

can you try console.log( JSON.stringify(allProducts, null, 2) )

Horned oak gallOP

2023-12-13T13:27:58.000Z

like this

so I was trying to fix the bug by using getStaticProps to remove async keyword in function, but the getStaticProps wasn't support in app/.

GG

2023-12-13T13:33:54.000Z

bruh

so what caused the issue?

Horned oak gallOP

2023-12-13T13:34:44.000Z

not know

2023-12-13T13:35:23.000Z

i still believe its part of your getData function not parsing correctly

@Horned oak gall `"use server" import { dbConn } from "../mongoose"; export async function getAll(){ try{ dbConn() const products = await Product.find() return products }catch(err){ console.log(err) } }`

2023-12-13T13:35:51.000Z

try returning only a part of the data and not the whole data

Horned oak gallOP

2023-12-13T13:37:30.000Z

nuhã€‚ã€‚ã€‚

same

damn, maybe tmr will be fixed

2023-12-13T13:38:59.000Z

ah

Horned oak gallOP

2023-12-13T13:39:09.000Z

I will come back tmr morning

too sleepy

2023-12-13T13:39:27.000Z

            {allProducts?.map((product, i) => (
                <DisplayCardClient key={i}/>
            ))}

try this then

Horned oak gallOP

2023-12-13T13:39:34.000Z

ok

this is the DisplayCardClient;

2023-12-13T13:40:09.000Z

ofc u need to remove the props too

Horned oak gallOP

2023-12-13T13:42:14.000Z

emmmmmmm

since I don't pass data to DisplayCard from DisplayCardClient, show the DisplayClient component not showing

but error was removed

2023-12-13T13:48:28.000Z

whats the difference betweenD isplayCard and DisplayCardClient?

in here you wrote DisplayCardClient? why is there DisplayCard?

@Horned oak gall In my nextjs app/page.tsx is using async fetching data, and I want to render data in a component, but within the component I would like to use "useSession" to filter data condition, but "useSession" only working in client side, When I add "use client" in the component however there is an error, " Maximum call stack size exceeded,React from 'react'" tsx //app/page.tsx import Image from 'next/image' import Searchbar from '@/components/Searchbar' import HeroCarousel from '@/components/HeroCarousel' import { getAll } from '@/lib/actions' import UserSession from '@/components/UserSession' import DisplayCard from '@/components/DisplayCard' const Home = async () => { const allProducts = await getAll() return ( <> <section className="trending-section"> <h2 className="section-text">We You Tracked</h2> <div className="flex flex-wrap justify-center gap-x-8 gap-y-16"> {/* <DisplayMiddleWare productList={allProducts}/> */} { allProducts?.map((product)=>( <DisplayCard key={product._id} product={product}/> )) } </div> </section> <UserSession/> </> ) } export default Home tsx //DisplayCard.tsx "use client" import { Product } from '@/types' import Link from 'next/link' import Image from 'next/image' import React from 'react'; import { useSession } from 'next-auth/react'; interface Props { product: Product; } const DisplayCard = ({ product}: Props) => { const { status, data: session } = useSession(); const isInList = session?.user?.search?.includes(product._id) return isInList ? ( <Link href={`/products/${product._id}`} className="product-card"> <div className='product-card_img-container border rounded-md overflow-hidden'> //the login to display data </div> </Link> ) : '' } export default DisplayCard

Horned oak gallOP

2023-12-13T22:16:17.000Z

Here was my orinial code which only has app/page.tsx and DisplayCard.tsx, as your suggestion "Therefore you should create a client component on a different file, and delegate your client logic there." I create a new Component called DisplayCardClient.tsx was generate by chatgpt

import { Product } from '@/types'
import Link from 'next/link'
import Image from 'next/image'
interface Props {
  product : Product
}
const DisplayCard = ({product}:Props) => {
 return (
    <Link href={`/products/${product._id}`} className="product-card">
      <div className='product-card_img-container border rounded-md overflow-hidden'>
        <Image
          src={product.image}
          alt={product.title}
          width={200}
          height={200}
          className='product-card_img'
        />
      </div>
      <div className='flex flex-col gap-3'>
        <h3 className='product-title'>{product.title}</h3>
        <div className='flex justify-between'>
          <p className='text-black opacity-50 text-lg capitalize'>
            {product.category}
          </p>
          <p className='text-black text-lg font-semibold'>
            <span>{product?.currency}</span>
            <span>{product?.currentPrice}</span>
          </p>
        </div>
      </div>
    </Link>
    
  )
}
export default DisplayCard

The original DisplayCard.tsx is completed working when it looked like this

only if I add "use client" at the top the error Maximum call stack size exceeded will occur

Horned oak gallOP

2023-12-14T02:15:07.000Z

@aardani hello bro,

@Horned oak gall <@194128415954173952> hello bro,<:blob_wave:753870952873590814>

2023-12-14T03:57:09.000Z

hello

where is the DisplayCardClient Code?

Horned oak gallOP

2023-12-14T03:57:38.000Z

oh I have just skip the component, cause it is not used any more

have you ever meet this kind of error before?

2023-12-14T03:58:59.000Z

its a common beginner's mistake

Horned oak gallOP

2023-12-14T03:59:03.000Z

just because use client

2023-12-14T04:00:00.000Z

I mean the error is apparent

Horned oak gallOP

2023-12-14T04:00:11.000Z

how should I debug

2023-12-14T04:00:14.000Z

something went wrong from passing data from server to client

then when you console.log the server data

you get Maximum call stack exceeded

maybe it has something to dow with the size of the data

Horned oak gallOP

2023-12-14T04:01:30.000Z

If I remove "use client" in DisplayCard.tsx then I have no error when console log server side data

2023-12-14T04:01:44.000Z

yes, you said that like 4 times already

removing "use client" is not the solution.
If you want to use useSession you need a client component

Horned oak gallOP

2023-12-14T04:02:26.000Z

yes

2023-12-14T04:02:30.000Z

yes

Horned oak gallOP

2023-12-14T04:03:24.000Z

emmmmm, so I don't konw the solution

2023-12-14T04:05:13.000Z

try passing just one product instead of multiple ones

Horned oak gallOP

2023-12-14T04:05:31.000Z

I will try

2023-12-14T04:05:40.000Z

<DisplayCardClient product={allProducts[0]} />

then 1

Horned oak gallOP

2023-12-14T04:10:35.000Z

I test from 0 - 6 since the lenght was 7, the result was all passed

Horned oak gallOP

2023-12-14T04:15:51.000Z

but when I uncomment "use client" then even just one index will still be error

I have even just try only leave an empty div, still the same error

<div></div>

Horned oak gallOP

2023-12-14T05:05:27.000Z

I try later put "use client" at top of Home and use useEffect

the error come only when I console log the product

Horned oak gallOP

2023-12-14T05:12:56.000Z

@aardani help

2023-12-14T05:32:16.000Z

i have no idea

seems like theres something wrong int he project

try to reproduce the bug on a minimal proejct :/