React's "automatic" JSX transform

[${Mr.DJA}]

I'm unable to set the JSX import source due to the following error:

transforming (68) suppliers\DOTW\boards.tsThe JSX import source cannot be set without also enabling React's "automatic" JSX transform
1  |  /** @jsxImportSource xml-jsx-runtime/runtime */
   |                       ^
2  |  import Client, { type RequestOptions } from './Client';
3  |  import { pascalCase } from 'pascal-case';

It seems that vavite is using the classic JSX runtime by default. How to change it to automatic?

[Fatih Aygün]

Hi,

vavite doesn't do anything about JSX at all. If you're not using a specific plugin (like @vitejs/plugin-react), Vite uses ESBuild to transpile JSX files. You can use Vite's esbuild config option to change the JSX runtime.

I can give it a deeper look if you can provide a minimal reproduction.

[${Mr.DJA}]

@cyco130 Thank you for the reply.

Adding esbuild: { jsx: 'automatic' } to vite.config.ts worked!
I'm actually using @vitejs/plugin-react but even though I've added react({ jsxRuntime: 'automatic' }) it didn't work. I believe something is overriding the option. It worth noting that react({ jsxThrowIfNamespace: false }) works, so it's not totally being ignored, only jsxRuntime is.

[Fatih Aygün]

Looks like the source code itself overrides it with the /** @jsxImportSource xml-jsx-runtime/runtime */ magic comment.

[${Mr.DJA}]

Actually, I don't believe it's caused by a magic comment, because in this case, /** @jsxRuntime classic */ is the one that would cause that, but I'm not using it anywhere. /** @jsxImportSource xml-jsx-runtime/runtime */ is added in purpose to enable transforming JSX syntax to XML. That worked fine before adding vavite. Most likely it's caused by ESBuild, problem solved anyway. Thank you so much for the hint.