💻

• Would you like to work on a fix?

How are you using Babel?

Programmatic API (babel.transform, babel.parse)

Input code

Full code is here https://github.com/hi-ogawa/reproductions/tree/main/vite-17954-babel-jsx-whitespace and you can try it on stackblitz https://stackblitz.com/github/hi-ogawa/reproductions/tree/main/vite-17954-babel-jsx-whitespace?file=src%2Frepro.js

Input

export const test = <div>{
  "Lorem"
} ispum </div>;

Configuration file name

No response

Configuration

Using babel api

await babel.transformAsync(input, {
  parserOpts: {
    plugins: ["jsx"],
  },
  retainLines: true,
  configFile: false,
  babelrc: false,
})

Current and expected behavior

Current output:

export const test = <div>{
  "Lorem"}
   ispum </div>;

Expected output:

I'm not sure... maybe same as input.

Environment

(stackblitz)

System:
OS: Linux 5.0 undefined
Binaries:
Node: 18.20.3 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
@babel/core: ^7.25.2 => 7.25.2

Possible solution

No response

Additional context

Originally issue is reported on Vite vitejs/vite-plugin-react#360

Vite's babel react plugin uses babel transform for fast-refresh while keeping JSX syntax, then later runs esbuild to transpile JSX. For development, we use retainLines: true so that esbuild's jsxDEV transpilation can include accurate line (cf. vitejs/vite-plugin-react#246).