[BUG] Hydration failed because the initial UI does not match what was rendered on the server

[ad-manish]

NextUI Version

2.2.6

Describe the bug

 return (
        <Card className="min-w-[400px]">
          <CardHeader className="flex gap-3">
            <Image
              alt="Algodomain logo"
              height={40}
              src="/LOGO.jpg"
              width={40}
            />
            <div className="flex flex-col"> Candidate Login</div>
          </CardHeader>
          <CardBody className="gap-3">
            <Input size="sm" type="email" label="Email" name="email" />
            <Input size="sm" type="password" label="Password" name="password" />
          </CardBody>
         </Card>
  );

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

When I am running the application npm run dev

on the port 3000 i am getting this error

This is related to the Input element in the card body, if I remove them, this error goes away.

Expected behavior

It should work

Screenshots or Videos

No response

Operating System Version

MacOS

Browser

Chrome

[NotLuksus]

Same issue here, only occurs with more then 1 input tho

[ghost]

Disable the Chrome Extension like Dark Reader. it works 99% of the Time. Try that in Incognito Mode. And share the output of Console.

[mattiasw]

A web extension was the problem for me, thanks! Unfortunately I have no solution except maybe using a (dynamically loaded) client component. And I guess it's not really possible for NextUI to handle this since it's a React issue.