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.