Skip to content

KaTeX stylesheet never loads, math renders twice as raw MathML + HTML #4606

Closed

Description

@leemthompo

Math blocks on the live site render twice: unstyled MathML (num_vectors shows as num with subscript v) followed by the KaTeX HTML output, with no KaTeX fonts.

Example: https://www.elastic.co/docs/deploy-manage/production-guidance/optimize-performance/approximate-knn-search#raw-vector-storage

The source is fine (\text{num\_vectors}). The page is just missing KaTeX's CSS, which is what hides .katex .katex-mathml.

Evidence

  • initMath in Assets/main.ts lazy-loads the CSS with import('./katex.css') (added in Assets: Lazy-load KaTeX JS, CSS, and fonts #3660).
  • The production bundle (/docs/_static/main-1OEc8Qmr.js) compiles that to C(()=>Promise.resolve({}), __vite__mapDeps([43]), import.meta.url), where dep 43 is ./chunk-katex-BtZVJ23X.css.
  • The chunk is served (200, contains the .katex-mathml rule), but the bundle contains no code that inserts a <link rel="stylesheet">, so nothing ever requests it.

Likely cause

Regression from the Parcel to Vite migration (#4383). The dynamic CSS import becomes a no-op unless the preload helper injects the CSS deps, and that helper does not appear in the output.

Possible fixes

  • Check build.modulePreload and the Rolldown output, and make sure CSS deps of dynamic imports get injected.
  • Or inject the stylesheet explicitly in initMath (new URL('./katex.css', import.meta.url) plus a <link>).
  • Or import katex.css eagerly again. It is about 29 KB.

Add a test that renders a math block and asserts that .katex-mathml is not visible, so this does not regress again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions