[React 19] React Compiler doesn't preserve HTML Entities

[Thanaen]

Summary

When using React Compiler, this component:

export default function MyApp() {
  return <div>Parent &gt; Children</div>;
}

becomes

function MyApp() {
  const $ = _c(1);

  let t0;

  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <div>Parent > Children</div>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }

  return t0;
}

which leads to this error: ERROR: The character ">" is not valid inside a JSX element

Repro: https://playground.react.dev/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgBMEAzAQygBsCSoA7OXASwjvwFkBPAQU0wAoAlPmAAdNvhgJcsNgB5CTAG4A+AApkpdAgDIA5rgDc+AMIALJpUJa5AekWrD4gL7iQzoA

[HoseinKhanBeigi]

To address the issue with React Compiler not preserving HTML entities, you can use a different approach to ensure that the > character is correctly rendered in your JSX. Instead of using the HTML entity >, you can use JavaScript's String.fromCharCode method to represent the character in a way that avoids the issue.
export default function MyApp() { return <div>Parent {String.fromCharCode(62)} Children</div>; }

[vemoo]

I think String.fromCharCode is not needed, this also seems to work:

export default function MyApp() {
  return <div>Parent {">"} Children</div>;
}

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgBMEAzAQygBsCSoA7OXASwjvwFkBPAQU0wAoAlPmAAdNvhgJcsNgB5CTAG4A+AApkpdAmJArRIAL74AwgAsmlQlrkB6RaoDc4w+KNA

[Thanaen]

I think String.fromCharCode is not needed, this also seems to work:

export default function MyApp() {
  return <div>Parent {">"} Children</div>;
}

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgBMEAzAQygBsCSoA7OXASwjvwFkBPAQU0wAoAlPmAAdNvhgJcsNgB5CTAG4A+AApkpdAmJArRIAL74AwgAsmlQlrkB6RaoDc4w+KNA

That seems like a nice workaround, thank you!

[josephsavona]

Thanks for the heads up, we’ll fix!

[josephsavona]

Fixed, thanks for reporting!