Text rendered through the Markdown component is missing from the built HTML

[vipulpandey21]

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 13d0577, 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.
• Bump react-markdown to v10 #524 edits the same file but keeps the wrapper, so it does not fix this.

Happy to send a PR.

[vipulpandey21]

Opened #649 with the change. It swaps the BrowserOnly wrapper for a direct import so the markdown renders during the build, and updates tsconfig so yarn typecheck still passes with the ESM only package.

One thing worth flagging: #524 edits the same file. It keeps the BrowserOnly wrapper so it does not overlap in intent, but the two will conflict. Happy to rebase mine on top of that one if it is going in first.