containers / containers/podman.io
Text rendered through the Markdown component is missing from the built HTML
- Dominant language
- TypeScript
- Stars
- 108
- Forks
- 188
- Avg merge
- 9d 15h
- Merged PRs (30d)
- 11
Description
Text that goes through the `Markdown` component is not in the HTML that gets served.
```
$ curl -s https://podman.io/features | grep -c "Podman makes it easy to find"
0
```
That sentence is visible on the page.
**Why:** `src/components/utilities/Markdown/index.tsx` wraps ReactMarkdown in `BrowserOnly`, which renders nothing during the static build. The text only appears after the browser loads it. The component is used in 19 places, including `PageHeader` and `SectionHeader`, which are on every custom page.
**How much text this is** (words in the served HTML):
| page | now | if it rendered on the server |
|---|---|---|
| / | 364 | 495 |
| /features | 414 | 525 |
| /community | 442 | 944 |
| /get-started | 718 | 826 |
On /community, 16 of the 28 longer visible lines are missing from the HTML.
**It builds fine without the wrapper.** Importing react-markdown directly: `yarn build` passes, no hydration warnings, and the text shows up. The bundle is slightly smaller too, so the lazy import is not buying anything.
**Where it came from:** #18 (April 2023) hit Suspense breaking the static build, the wrapper landed in 13d05779a, and it was never revisited. React 17 does not support Suspense on the server, which is why it broke back then.
Notes:
- The `BrowserOnly` in `HeroHeader` is a different case, it needs the browser for OS detection. Leaving that one.
- Docs and blog pages use Docusaurus MDX, so they are not affected.
- #524 edits the same file but keeps the wrapper, so it does not fix this.
Happy to send a PR.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in src/components/utilities/Markdown/index.tsx and inspect how BrowserOnly surrounds ReactMarkdown; check its uses in PageHeader and SectionHeader. Run yarn build, then verify that Markdown text appears in the served HTML without hydration warnings, while the separate HeroHeader browser-only behavior remains unchanged.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100