RangeError: Maximum call stack size exceeded at String.replace (<anonymous>)

Question

I am currently working on a Stack Overflow clone project using Next.js. I have successfully connected to the server component and the database model, and I am able to retrieve data from the database. However, when I attempt to display this data on the home page, I encounter an issue that I am not able to identify. I apologize if the provided information is not sufficient; I am a beginner in Next.js and may not be aware of certain nuances. Below is the code where I am attempting to display the questions. If you could provide guidance or assistance, it would be greatly appreciated.

import LocalSearchBar from "@/components/shared/search/LocalSearchBar";
import { HomePageFilters } from "@/constants/filters";
import Filter from "@/components/shared/Filter";
import Link from "next/link";

import NoResults from "@/components/shared/NoResults";
import QuestionCard from "@/components/cards/QuestionCard";
import { getQuestions } from "@/lib/actions/question.action";
import HomeFilters from "@/components/home/HomeFilters";

export default async function Home() {
  const result = await getQuestions({});

  return (
    <>
      <div className="flex w-full flex-col-reverse justify-between gap-4 sm:flex-row sm:items-center">
        <h1 className="h1-bold text-dark100_light900">All Question</h1>
        <Link href="/ask-question" className="flex justify-end max-sm:w-full">
          <button className="primary-gradient min-h-[46px] rounded-md px-4 py-3 !text-light-900">
            Ask a Question
          </button>
        </Link>
      </div>
      <div className="mt-11 flex justify-between gap-5 max-sm:flex-col sm:items-center">
        <LocalSearchBar
          route="/"
          iconPosition="right"
          imgSrc="/assets/icon/search.svg"
          placeHolder="Search for questions"
          otherClasses="flex-1"
        />
        <Filter
          filters={HomePageFilters}
          otherClasses="min-h-[56px] sm:min-w-[170px]"
          containerClasses="hidden max-md:flex"
        />
      </div>

      <HomeFilters />

      <div className="mt-10 flex w-full flex-col gap-6">
        {result.questions.length > 0 ? (
          result.questions.map((question) => (
            <QuestionCard
              key={`${question._id}`}
              _id={`${question._id}`}
              title={question.title}
              tags={question.tags}
              upVotes={question.upVotes}
              author={question.author}
              answers={question.answers}
              views={question.views}
              createdAt={question.createdAt}
            />
          ))
        ) : (
          <NoResults
            title="There are no question to show"
            description="Be the first to break the silence! 🚀 Ask a Question and kickstart the discussion. our query could be the next big thing others learn from. Get involved! 💡"
            link="/"
            linkTitle="Ask a Question"
          />
        )}
      </div>
    </>
  );
}

I have diligently reviewed my code to check for any instances of infinite loops or incorrect imports, but I have not identified any such issues. Despite my efforts, the problem persists. I would greatly appreciate any assistance or guidance you could provide.

Answer 1

I was having the same problem.

In my case I was calling

const result = await signUp(formData)

The problem is that in the "result' variable there was too many information. That's why I had:

 RangeError: Maximum call stack size exceeded

To solve this I adjusted what the signUp action function was returning in server action.

Using Axios:

try {
   const response = await api.post("/user", {
        name,
        email,
        password,
        state,
        city
    })

    return response.data
} catch (err: any) {
   console.log(err)
    return err.response.data || "Error"
}

Before I was returning only 'response'

Answer 2

You should call your API inside a useEffect and result should be a state inside your component

Change this

const result = await getQuestions({});

To this

const [result, setResult] = useState();

useEffect(() => {
    (async () => {
      setResult( await getQuestions({}) );
    })()

}, []);

if(!result) return null;