Render markdown during the static build - #649
Open
vipulpandey21 wants to merge 1 commit into
Open
Conversation
The Markdown component wrapped ReactMarkdown in BrowserOnly, so every string passed through it was missing from the generated HTML and only appeared after hydration. That covers 19 call sites, including PageHeader and SectionHeader, which are on every custom page. Import react-markdown directly and render it normally. tsconfig needs module and moduleResolution set so tsc accepts a static import of an ESM only package; the webpack build already handled this. Fixes: containers#648 Signed-off-by: Vipul Subhash Pandey <vipulpandey7917@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #648
Markdownwrapped ReactMarkdown inBrowserOnly, which renders nothing during the static build. So any text passed through it was missing from the HTML and only appeared after hydration. 19 call sites, includingPageHeaderandSectionHeader.Before
After (local build)
Words of text in the HTML:
/community went from 16 missing lines to 0.
The tsconfig change. react-markdown v8 is ESM only, and the base config sets
moduleResolution: Node16, so a static import gives TS1479. This only affectsyarn typecheck, the webpack build is fine either way. Settingmodule: esnextandmoduleResolution: nodeclears it, and the error count is the same 6 pre-existing ones before and after. Happy to do this another way if you would rather not touch tsconfig.This also looks like the original reason for the dynamic import. React 17 cannot render Suspense on the server, which is what #18 ran into in 2023.
Checked:
yarn buildpasses, no console errors on the built site, thestylesprop still applies, and the bundle is slightly smaller without the lazy chunk (1026 to 1025 chunks).Notes: the
BrowserOnlyinHeroHeaderneeds the browser for OS detection, so I left it. #524 touches the same file and will conflict, happy to rebase if that goes in first.I used an LLM to help write this description. The work and the testing are mine and I can explain any of it.