Hydration Error related with Download Button
Nobody has claimed this yet.
- 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:
- Given this
redocly.yamlfile:
extends:
- recommended
apis:
main:
root: openapi.yaml
theme:
openapi:
hideDownloadButton: false
- 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
-
Run this command with these arguments:
Using @redocly/cli version 1.34.3 run:
redocly build-docs --disableGoogleFont openapi.yaml -o dist/index.html -
See error
Serve the createddist/index.htmlfile and open it with a Browser (tested on Firefox and Chrome).
Choose toInspectthe created API Docs and go to the tabConsole. The hydration messages (mentioned in the description above) will be reported. -
Repeat without the Download Button
SethideDownloadButtonto 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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