Technology

Hydration Errors with NextJS and Inputs

When using NextJS, I've occasionally run into hydration errors and waste time trying to figure out what's wrong. Then I remember that I have LastPass and Proton Pass installed.

Kevin Williams

— 1 min read

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 });

no-ssr.tsx

<NoSsr>
  <InputOutlined
    id="email"
    placeholder="Email"
    onChange={(event) => handleTextChange(event, "email")}
    value={registrationData.email ?? ""}
  />
</NoSsr>

my-component.tsx

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;
}

Read more