Skip to content

Hydration error: DisclosureTrigger renders nested <button> causing Next.js hydration failure #166

Description

@karthikfron

Description

When running the docs locally (npm run dev), the homepage crashes with a Next.js hydration error. The issue comes from the DisclosureTrigger component inside components/core/disclosure.tsx.

The component clones its children and injects button-like props. If the user passes a <button> as the child, this results in nested <button> markup, which is invalid HTML and breaks hydration.


Error Message

Next.js shows the following error:

Image

Steps to Reproduce

  1. Clone the repository
  2. Run npm install
  3. Run npm run dev
  4. Open http://localhost:3000
  5. The hydration error appears immediately due to nested <button> markup

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions