Theo's Typesafe Cult•16mo ago

Nextjs having infinite errors

Hello I keep having this error and it keeps retrying and makes the page non responsive. It's almost like a useEffect kind of situation

6 Replies

Neto•16mo ago

What error?

ComplexlityOP•16mo ago

So the attachment is taking some time to upload but it's

app-index.js:31 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.

react-dom.development.js:6779 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

ComplexlityOP•16mo ago

Neto•16mo ago

It's a "common" react issue You can try disabling extensions to see if the error still happens If not, you have to check the components

Neto•16mo ago

https://traviswimer.com/blog/easily-fix-react-hydration-errors/

Easily Fix React Hydration Errors

React hydration is a great feature that allows your site to seamlessly transition from simple HTML to an interactive Single Page App (SPA). Unfortunately it is also easy to run into errors. In this blog post, I explain how you can fix those errors.

ComplexlityOP•16mo ago

Okay. I'll try this. My main issue is not only that it occurs, it's that it loops infinitely I just found it's my Navbar that's the problem

'use client'

import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle
} from "@/components/ui/navigation-menu";
import { ExternalLink } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import logo from '../../public/logo.png';

// import useSession from "@/hooks/useSession";


export default async function Navbar() {
  // const user = useSession()

  return (
    <div className="bg-blueDarkest  ">
      <div className="container flex items-center justify-between py-3 border-b-2 border-b-blueLight">
        <NavigationMenu className="">
          <NavigationMenuList className="flex gap-8">
            <Link href="/">
              <Image src={logo} alt="logo" height={48} width={48} />
            </Link>
            <NavigationMenuItem className="">
              <Link href="/" legacyBehavior passHref>
                <NavigationMenuLink
                  className={`${navigationMenuTriggerStyle()} bg-transparent text-white hover:bg-blueLight hover:text-blueDarkest`}
                >
                  Home
                </NavigationMenuLink>
              </Link>
            </NavigationMenuItem>
            <NavigationMenuItem className="">
              <Link href="#" legacyBehavior passHref>
                <NavigationMenuLink
                  className={`${navigationMenuTriggerStyle()} flex gap-1 items-center  bg-transparent text-white hover:bg-blueLight hover:text-blueDarkest`}
                >
                  <span>Create</span>
                  <ExternalLink className="w-4 h-4 -mt-1" />
                </NavigationMenuLink>
              </Link>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>

      </div>
    </div>
  );
}

'use client'

import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle
} from "@/components/ui/navigation-menu";
import { ExternalLink } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import logo from '../../public/logo.png';

// import useSession from "@/hooks/useSession";


export default async function Navbar() {
  // const user = useSession()

  return (
    <div className="bg-blueDarkest  ">
      <div className="container flex items-center justify-between py-3 border-b-2 border-b-blueLight">
        <NavigationMenu className="">
          <NavigationMenuList className="flex gap-8">
            <Link href="/">
              <Image src={logo} alt="logo" height={48} width={48} />
            </Link>
            <NavigationMenuItem className="">
              <Link href="/" legacyBehavior passHref>
                <NavigationMenuLink
                  className={`${navigationMenuTriggerStyle()} bg-transparent text-white hover:bg-blueLight hover:text-blueDarkest`}
                >
                  Home
                </NavigationMenuLink>
              </Link>
            </NavigationMenuItem>
            <NavigationMenuItem className="">
              <Link href="#" legacyBehavior passHref>
                <NavigationMenuLink
                  className={`${navigationMenuTriggerStyle()} flex gap-1 items-center  bg-transparent text-white hover:bg-blueLight hover:text-blueDarkest`}
                >
                  <span>Create</span>
                  <ExternalLink className="w-4 h-4 -mt-1" />
                </NavigationMenuLink>
              </Link>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>

      </div>
    </div>
  );
}

NOt sure what I did wrong. This has always worked before. @nyx (Rustular DevRel) I have finally found the issue with it. It has to do with using async in client components. Not sure why it happens but If you do export default async function Navbar()... It causes the infinite errors. Thank you!

Gaming

Programming

Nextjs having infinite errors