Skip to content

[Bug]: Extra newlines added to JSX with retainLines option #14868

@michaldudak

Description

@michaldudak

💻

  • Would you like to work on a fix?

How are you using Babel?

Programmatic API (babel.transform, babel.parse)

Input code

import * as babel from "@babel/core";

const source = `
export default function Component() {
  return (
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  );
}`;

const result = babel.transformSync(source, {
  filename: "source.tsx",
  plugins: ["@babel/plugin-syntax-jsx"],
  configFile: false,
  babelrc: false,
  retainLines: true,
});

console.log(result.code);

Configuration file name

No response

Configuration

No response

Current and expected behavior

Additional newlines that don't exist in source are added to the output:

Actual

export default function Component() {
  return (
    <ul>

      <li>One</li>

      <li>Two</li>

      <li>Three</li>

    </ul>);

}

Expected

export default function Component() {
  return (
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  );
}

Environment

System:
OS: Windows 10 10.0.19044
Binaries:
Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.15.0 - ~\node_modules.bin\npm.CMD
npmPackages:
@babel/core: 7.17.5 => 7.17.5
@babel/plugin-syntax-jsx: 7.17.12 => 7.17.12

Possible solution

No response

Additional context

This bug was likely introduced in @babel/generator@7.18.9. When I pinned the version to 7.18.7, the output was correct.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions