Skip to content

HTML-like content shows uneccessary errors in the console.Β #316

@lachieh

Description

@lachieh

Bug Description

Any text that contains XML sequences that aren't valid HTML will make React drop a bunch of errors in the console and prevent the item from rendering. If the content includes something that isn't going to render correctly, it would be nice to be able to escape them automatically so that this doesn't occur. It is possible to handle this before passing the content into streamdown, however it's not necessarily possible since something may get modified with rehype and escaping beforehand would break that.

  • "<invalid>" will not render and will show an error: The tag <invalid> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
  • "`<invalid>`" will render inside a <code> tag

Steps to Reproduce

Pass any string that contains xml that is not a valid html element and open the console to see the errors. See code sample for example.

Expected Behavior

No errors logged to console.

Actual Behavior

Errors are logged to the console.

The tag <valid> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
The tag <not> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Code Sample

import { Streamdown } from 'streamdown';

export default function App() {
  const markdown = `# Hello World

  This is **streaming** markdown!

This is \`<not> <valid>\` HTML

This is <not> <valid> HTML
`;

  return (
    <div className="App">
      <Streamdown>{markdown}</Streamdown>
    </div>
  );
}

Streamdown Version

1.6.10

React Version

19.2.3

Node.js Version

No response

Browser(s)

No response

Operating System

None

Additional Context

I'm willing to contribute if there is appetite to handle this in this package.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions