Redocly / Redocly/redocly-cli

Hydration Error related with Download Button

Open
#2,113 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Type: Bug
Dominant language
TypeScript
Stars
1.5k
Forks
228
Avg merge
1d 14h
Merged PRs (30d)
48

Description

Describe the bug

I tried to upgrade from "@redocly/cli": "1.27.0" to "@redocly/cli": "1.34.3", but hydration errors appear on Browser's Console with messages:

Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

When I deactivate the download button in redocly's configuration file:

theme:
  openapi:
    hideDownloadButton: true

the above errors are fixed.

To Reproduce
Steps to reproduce the behavior:

  1. Given this redocly.yaml file:
extends:
  - recommended

apis:
  main:
    root: openapi.yaml
theme:
  openapi:
    hideDownloadButton: false 
  1. And this OpenAPI file:
openapi: 3.0.3
info:
  title: Sample API
  version: 1.0.0
  description: A simple example of OpenAPI with Redocly.
servers:
  - url: https://api.example.com/v1
paths:
  /hello:
    get:
      summary: Returns a greeting
      responses:
        '200':
          description: Successful response
          content:
            application/json:
              schema:
                type: object
                properties:
                  message:
                    type: string
  1. Run this command with these arguments:
    Using @redocly/cli version 1.34.3 run:
    redocly build-docs --disableGoogleFont openapi.yaml -o dist/index.html

  2. See error
    Serve the created dist/index.html file and open it with a Browser (tested on Firefox and Chrome).
    Choose to Inspect the created API Docs and go to the tab Console. The hydration messages (mentioned in the description above) will be reported.

  3. Repeat without the Download Button
    Set hideDownloadButton to true in redocly.yaml and rebuild the docs:
    redocly build-docs --disableGoogleFont openapi.yaml -o dist/index.html
    Serve the static file and inspect it in your browser. No errors should be logged there.

Expected behavior
Download button does not cause any hydration errors.

OpenAPI description
OpenAPI version: 3.0.3

Redocly Version(s)
"@redocly/cli": "1.34.3"

Node.js Version(s)

v20.19.2

OS, environment

Ubuntu 24.04.2 LTS

Additional context

API Docs work as expected until "@redocly/cli": "1.28.3"

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue using redocly.yaml and openapi.yaml, then run the documented build-docs command with @redocly/cli 1.34.3. Serve dist/index.html and inspect the browser console with hideDownloadButton set to false, then compare it with true. Done means the download button remains enabled without React hydration errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
node.js, react, typescript
Domain
cli, documentation
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.