Skip to content

[Bug]: ArticleCard uses browser-only DOM API during server-side rendering #683

Description

@vaishnavi192

Consisely describe the issue

ArticleCard currently processes the HTML passed to its title and subtitle props using a sanitizeHtml function that calls document.createElement() during component rendering.

Since document is only available in a browser environment, this makes ArticleCard dependent on browser-specific APIs during rendering. Docusaurus can render the component in its server/static rendering environment, where document is unavailable.

This makes ArticleCard unsafe to render in Docusaurus's non-browser rendering environment.

SCOPE: ArticleCard is a shared component used across multiple parts of the Podman website to display article and blog content. Because the browser-only DOM operation happens during the component's render path, the issue is not isolated to a single page.

Upload screenshots or screen recordings

I reproduced this by creating a minimal page that directly renders ArticleCard and running yarn build. The client compilation succeeds, but Docusaurus fails while server-side rendering the test page. The failure occurs when ArticleCard attempts to access document.

Image Image Image

Proposed Fix: Replace the DOM-based HTML-to-text conversion in ArticleCard with an SSR-safe conversion that does not rely on browser-specific APIs such as document.

The HTML contained in the title and subtitle props should be converted to plain text using the existing html-react-parser dependency and then rendered normally. This keeps the conversion available during both browser and Docusaurus server/static rendering.

The existing ArticleCard layout, truncation behavior, and displayed content should remain unchanged. The change should be limited to removing the browser DOM dependency from the text-conversion step.

LLM Policy

  • This issue is human-written, and folow up comments will also be human-written

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions