Does not work with babel's babel-plugin-jsx-control-statements plugin

[FatehAK]

Describe the bug

I'm using the babel-plugin-jsx-control-statements plugin to transform code within JSX files. But the transform does not work.

  <If condition={true}>
     foo
  </If>

The above code should output foo since the condition is true. The transformation happens but we get a string representation of it instead.

This issue does not happen in the 2.2.0 version of vite-plugin-react

Reproduction

https://stackblitz.com/edit/vitejs-vite-hcxdwa?file=src/App.jsx

Steps to reproduce

1. Install the babel-plugin-jsx-control-statements plugin
2. Add it to babel config of the vite react plugin
3. Add a simple JSX control statement component
4. View the issue by running the dev server

System Info

System:
    OS: macOS 12.6.1
    CPU: (8) arm64 Apple M1
    Memory: 95.86 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/Library/Caches/fnm_multishells/4837_1672312752866/bin/node
    npm: 9.2.0 - ~/Library/Caches/fnm_multishells/4837_1672312752866/bin/npm
    Watchman: 2022.12.12.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 108.0.5359.124
    Safari: 16.2
  npmPackages:
    @vitejs/plugin-react: 3.0.0 => 3.0.0
    vite: ^4.0.3 => 4.0.3

Used Package Manager

pnpm

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.
• 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.

[ArnaudBarre]

Seems like an issue with the plugin that's doesn't work if the jsx transform is not done at the same time with Babel.
With vite-plugin-inspect:

JSX transform is done with esbuild since 3.0.

So for me this is not an issue with the vite plugin, more a limitation of a plugin built for a Babel only world. I would advice migrating away from Babel plugins for such a small gain. This can be implemented in few lines by a React component that does the same, or simply using ternary that are much more flexible. When using Babel plugins, you're running Babel in production build too, which is slower and blocks you from using other native toolchain like SWC, bun or new one to come.

[FatehAK]

Ah! So the 3.0 version of the plugin can't work with any Babel plugins that work with JSX code since esbuild handles it now.

Will Babel plugins still work for pure JS files? I just want to understand if any Babel plugins would work with new 3.0 plugin version.

Is it possible to update the docs with these details?

[ArnaudBarre]

Everything should as normal, it just the plugin that doesn't handle the case of "jsx output".

The plugin should output {true ? "foo" : null} in that case instead of true ? "foo" : null

Other plugins that don't depend on that or handle it should work the same.

[FatehAK]

Cool thanks! You can mark this issue closed.