Hydration Errors with NextJS and Inputs

Hydration Errors with NextJS and Inputs

I've been using NextJS for a few projects lately, and occasionally I start running into these errors:

Each time, I spend an hour or more trying to figure out what I did wrong and why my markup's incorrect, but I always forget that I have LastPass and Proton Pass installed.

Looking at this issue on GitHub, the hydration errors are due to the fact that plugins like this manipulate the DOM and add their buttons to input fields, causing a difference between what the client and server render.

Interestingly, the problem only seems to happen when you do a hard-refresh, and it may stem from the fact that some plugin calls happen prior to the hydration phase

Unfortunately, it looks like the only way to resolve this at the moment is to specify "suppressHydrationWarning={true}" on the elements (which didn't work for me) or prevent the element from rendering on the server by creating a wrapper component that specifies that SSR shouldn't be used.

import { ReactNode } from "react";
import dynamic from "next/dynamic";

interface NoSSRProps {
  children: ReactNode;

const NoSSR = ({ children }: NoSSRProps) => <>{children}</>;
export default dynamic(() => Promise.resolve(NoSSR), { ssr: false });


    onChange={(event) => handleTextChange(event, "email")}
    value={registrationData.email ?? ""}


As a bonus, I did manage to find a way to hide the icons as well

/* Prevent lastpass and proton mail password managers from displaying icons on input fields */
div[data-lastpass-icon-root] {
  display: none;

div > protonpass-control {
  display: none;

Kevin Williams

Springfield, Missouri