Skip to content

JSX parser collapses newline to space in quoted attribute values #11550

@icyJoseph

Description

@icyJoseph

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

https://play.swc.rs/?version=1.15.11&code=H4sIAAAAAAAAAy2MTQ6CMBCF93OKl65gYTwAwtprVDrYJs3U1BmjIdxdim5evrw%2FZ0%2FGnBOLuoGI349SFYEXb1mxmMyaiuDKOZduxdZjJaCyWhV0OwKXkF4HAMGrP3n5aExyH92tWqQm7sinfyu2s9%2F0vG%2Bb3Q%2B00Rfc63fmjAAAAA%3D%3D&config=H4sIAAAAAAAAA1WPSw7CMAxE9z1F5TULVCEW3IFDRMGtgtoksl2JqOrdm2%2BBXfxmJmNvXd%2FDmzU8%2Bi0%2B4%2BAVMdI5R8LBivpEAhI8sibjBS5NFU6S0IqZ7EUAUTShpBDycB1uNQCzc4wRj2pmrGwx1ozht1K7xRMy%2FxuTVdlpPvOlsautsLjXmsV6Slq3bHCHr6mVnR%2BD4WdL5jv2A3LKYuEWAQAA

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions