HP1005: Attribute only present in the server HTML

HP1005 (extra-attribute) means the server HTML has an attribute that React does not render on the client. React leaves it in place during hydration, so the element keeps an attribute your client code never set. Remove the attribute from the server output, or render it on the client too.

What HP1005 (extra-attribute) means

The element exists on both sides, but one attribute is only in the server's version. That usually means the component rendered it under a condition that is true on the server and false in the browser.

hydration-proof compares the attributes of every element React reused with the props React renders. For attributes present only in the server HTML, it checks data-*, aria-*, id, role, title, alt, lang, dir, href, src, tabindex, for, name and type. An extra class or style is reported as HP1004 or HP1003.

An attribute a browser extension or another script adds before hydration was never in the server's response, so it is reported as a change outside React (HP4001 or HP4002), not as HP1005.

The React error it matches

React 18 warns about it in development:

Warning: Extra attributes from the server: data-rendered-on

See Extra attributes from the server for what the warning means. React 19 reports attribute differences with a tree hydrated but some attributes didn't match, in development only.

Likely causes

• A server-only branch, such as typeof window === "undefined", that adds the attribute: a browser-only API check.
• A value that is set on the server and undefined in the browser, from browser storage or different data.
• A generated id that exists only in the server render.

How to fix it

• Remove the attribute from the server output or render it on the client too.

"use client";
 
export function Hero() {
  const isServer = typeof window === "undefined";
 
  return (
    <section id="hero" data-rendered-on={isServer ? "server" : undefined}>
      Welcome
    </section>
  );
}

Render the same attributes in both places. If the value is only known in the browser, set it after mount:

export function Hero() {
  return <section id="hero">Welcome</section>;
}

Prevent it with ESLint

no-window-render-branch reports components that render something different on the server and in the browser.

When the difference is intentional

If a server or middleware adds an attribute on purpose, list it in ignore.attributes so it is never compared, or add an ignore.issues rule with code: "HP1005" and a reason. See ignoring findings.

Example

  ⚠ /about 740ms  1 warning
    HP1005 Attribute only present in the server HTML  (browser-only api used during render, 58%)
      #hero  in Hero
      attribute: data-rendered-on
      server: "server"
      client: (absent)
      components/hero.tsx:7:5
      → Code like `typeof window !== "undefined"` or window/navigator/document access renders differently on the server. Read browser values in useEffect, or render the component on the client only.

Related

• HP1006: attribute missing from the server HTML
• HP1002: attribute differs
• Extra attributes from the server
• Browser extensions and hydration