-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Description
Describe the bug
JSX output differs from Babel/Typescript
Whereas with the given input code, SWC outputs: bruh bruh
Babel/TS output: bruh\nbruh
This can lead to hydration errors in Next.js apps, when the client receives React Compiler output.
Input code
"use client";
export default function Hello({ }) {
return (
<div
data-anything="bruh
bruh"
>
hello
</div>
);
}Config
{
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": true
},
"target": "es2024",
"loose": false,
"minify": {
"compress": false,
"mangle": false
}
},
"module": {
"type": "es6"
},
"minify": false,
"isModule": true
}Link to the code that reproduces this issue
SWC Info output
No response
Expected behavior
Should align with Babel/TS, and output bruh\nbruh.
Perhaps debatable, since we are starting from invalid JavaScript syntax, but it is JSX code, that a spec should've defined, but AFAIK, no such thing exists, instead Babel/TS seem to be setting the expected output.
Actual behavior
No response
Version
1.15.11
Additional context
Reported because for those using this JSX syntax, this can lead to hydration errors with the React Compiler, but arguably JSX is being too forgiving here, both SWC, Babel and TS should perhaps claim that this is not valid syntax. Or I am just missing some spec, explanation of this magic.