Closed
Description
What kind of issue is this?
- React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
- babel-plugin-react-compiler (build issue installing or using the Babel plugin)
- eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
- react-compiler-healthcheck (build issue installing or using the healthcheck script)
Link to repro
Repro steps
- Use a string with a newline character (
\n
) passed as a prop to a component with curly bracesprop={"text\ntext"}
- Observe that react compiler outputs
prop="text\ntext"
instead ofprop={"text\ntext"}
This is incorrect behavior. The newline character is no longer properly treated as a newline but rather as the raw text \n
.
You can see this behavior be correctly also incorrectly handled in the second component, where prop="text\ntext"
becomes prop="text\\ntext"
, resulting in the wrong text being displayed on the screen.
JSX rules specifically don't allow this kind of conversion, noted in 1.5.1 of the spec
Historically, string characters within JSXAttributeValue and JSXText are extended to allow the presence of HTML character references to make copy-pasting between HTML and JSX easier, at the cost of not supporting \ EscapeSequence of ECMAScript's StringLiteral.
How often does this bug happen?
Every time
What version of React are you using?
19.0.0-rc-6f23540c7d-20240528