Inconsistent whitespace handling in JSX between vite dev and vite build

[vinodgubbala]

Describe the bug

Description of the Issue:

After migrating from Create React App (CRA) to Vite, I've encountered an inconsistency in how whitespace is handled in JSX between the development vite dev and production vite build. Specifically, JSX strings that are expected to have spaces between them in the rendered output are concatenated without spaces when running the development server (vite dev). However, when building the project using vite build, the whitespace is preserved correctly.

Dev vs Build

Expected Behavior:

The rendered output in both vite dev and vite build should be consistent and should correctly include the space, i.e., "Lorem ispum".

Additional Context:

This issue might be related to how the Vite development server handles JSX parsing differently from the production build process. Ensuring consistency between development and production builds is important for a smooth developer experience.

Having recently moved from Create React App (CRA), this inconsistency is particularly troubling, as it was not an issue with CRA. Achieving consistent behavior across development and production is crucial to our development workflow.

Minimum reproducible project

whitespace-vite.zip

Note

The reproduction URL is working fine, but when I download the same project and run it in local, it causes the issues.

Reproduction

https://stackblitz.com/edit/vitejs-vite-luvdvh?file=index.html

Steps to reproduce

1. Create a simple React component with JSX that includes a space between two strings:

root.render(<div>{
   "Lorem"
} ispum</div>);

2. Run the project using vite dev.
3. Observe that the rendered output is "Loremispum" instead of "Lorem ispum".
4. Now build the project using vite build and serve the built files.
5. Observe that the output correctly includes the space, rendering "Lorem ispum".

System Info

System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 373.08 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.12.2/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    Watchman: 2023.06.12.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 128.0.6613.85
    Chrome Canary: 130.0.6680.0
    Edge: 128.0.2739.42
    Safari: 17.6
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1 
    vite: ^5.4.2 => 5.4.2

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-luvdvh (Open reproduction)

[hyrious]

This is because the react plugin enables retainLines and transforms your jsx code to:

root.render(<div>{
  "Lorem"}
   ispum </div>);
//^ this is interpreted as no space here.

So it maybe an issue of babel which should preserve leading spaces (using {" "}) in jsx texts.

[vinodgubbala]

@hyrious thanks for your response. Is there a workaround to get development work as production without having to change the code at all places.

[hi-ogawa]

I was checking the transform using https://github.com/antfu-collective/vite-plugin-inspect/ and as @hyrious pointed out, the transform got broken by babel's retainLines: true.

console.log(<div>{
  "Lorem"
} ispum </div>)

// ⇓ vite:react-babel

console.log(<div>{
  "Lorem"}
   ispum </div>);

// ⇓ vite:esbuild

console.log(/* @__PURE__ */ jsxDEV("div", { children: [
  "Lorem",
  "ispum "
] }, void 0, true, {
  fileName: "/home/hiroshi/code/others/vite-plugin-react/playground/react/App.jsx",
  lineNumber: 9,
  columnNumber: 13
}, this));

As a workaround, you can lower JSX during babel transform using @babel/plugin-transform-react-jsx-development, which is also what's currently recommended for react-compiler integration.

vite-plugin-react/playground/compiler/vite.config.ts

Lines 5 to 15 in 0f7684a

	export default defineConfig(({ command }) => {
	const babelPlugins = [['babel-plugin-react-compiler', {}]]
	if (command === 'serve') {
	babelPlugins.push(['@babel/plugin-transform-react-jsx-development', {}])
	}
	return {
	server: { port: 8900 /* Should be unique */ },
	plugins: [react({ babel: { plugins: babelPlugins } })],
	}
	})

[vinodgubbala]

After little bit of struggle, realised compiler is not required. It is also giving me error.
So I had to use this instead and it working as expected for this scenario.

const babelPlugins = [];
if (command === 'serve') { 
    babelPlugins.push(['@babel/plugin-transform-react-jsx-development', {}]) 
} 

I will give it more testing and let you know if this workaround has a problem.
Thanks for the suggestion.

[hi-ogawa]

Ah, sorry it was probably confusing. Right, what I meant is to only include @babel/plugin-transform-react-jsx-development when command === 'serve'.

FYI, I also submitted an issue on babel babel/babel#16774

[ArnaudBarre]

I'm closing this as this as been fixed in Babel and released as v7.25.6. Thanks @hi-ogawa for reporting the issue!