Range-Error Maximum call stack size exceeded in Next js

I am creating a notion clone using shadc-ui [https://ui.shadcn.com/] when the (landing)- router and _components are created. The components are from shadcn-ui.

Here is my image :

layout.js :

import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Notion",
  description: "The connected workspace Notion",
  icons: {
    icon: [
      {
        media: "(prefers-color-scheme:light)",
        url: "/logo.png",
        href: "/logo.png",
      },
      {
        media: "(prefers-color-scheme:dark)",
        url: "/logo-dark.png",
        href: "/logo-dark.png",
      },
    ],
  },
};

export default function RootLayout({ children }) {
  return (
    <html lang="en" supressHydrationWarning>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

layout.jsx:

import React from "react";

const MarketingLayout = ({ children }) => {
  return (
    <div>
      <main>{children}</main>
    </div>
  );
};

export default MarketingLayout;

Heading.jsx:

import React from "react";

const Heading = () => {
  return (
    <div className="min-h-full flex flex-col dark:bg-[#1F1F1F]">
      <Heading />
    </div>
  );
};


export default Heading;

page.jsx:

import React from "react";

import Heading from "./_components/Heading";

const LandingPage= () => {
    return (
      <div className="min-h-full flex flex-col dark:bg-[#1F1F1F]">
        <Heading />
      </div>
    );
  };
  
  export default LandingPage;

button.jsx:

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva } from "class-variance-authority";

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"
  return (
    (<Comp
      className={cn(buttonVariants({ variant, size, className }))}
      ref={ref}
      {...props} />)
  );
})
Button.displayName = "Button"

export { Button, buttonVariants }

the above images was the error "range error: maximum call stack size exceeded"

Is there any way that i can sort out this? i tried this again from the scratch but the error is same.

Solution

You have a recursive call in your <Heading /> component i. e. you call the <Heading/> component from within the <Heading/> component which calls the <Heading/>, which again itself calls the <Heading/> component and so on. That means this function will be called indefinitely until the call stack is exceeded at some point, hence the error.

Call stack

A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function

from MDN Docs

import React from "react";

const Heading = () => {
  return (
    <div className="min-h-full flex flex-col dark:bg-[#1F1F1F]">
       {/* Here is where the recursive call happens*/}
       <Heading />
    </div>
  );
};


export default Heading;

So what you need to do is not call the <Heading/> withing the <Heading/> component, or if you need to do that (for whatever reason) provide some condition that breaks you out of that recursive call chain (so called base case in recursive implementations).

Fun fact: This error in many programming languages is called Stack Overflow error and some languages therefore also have exceptions named like that e.g. Java. Also the error gave this very site its name (which was btw decided by a community voting) ;)