Skip to content

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

@karthikfron

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

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