Support jsx automatic runtime

[re-thc]

React 17 will be adding jsx automatic runtime. It's now available in the latest release candidate.

More info here.

Can vite support this? i.e. react/jsx-runtime and react/jsx-dev-runtime

Thanks!

[zhangyuang]

not yet. jsx in react use esbuild default that React.createElement。maybe add it to the configuration later。

const JsxPresets: Record<
  string,
  Pick<TransformOptions, 'jsxFactory' | 'jsxFragment'>
> = {
  vue: { jsxFactory: 'jsx', jsxFragment: 'Fragment' },
  preact: { jsxFactory: 'h', jsxFragment: 'Fragment' },
  react: {} // use esbuild default
}

[intrnl]

This will have to depend on esbuild itself.

[underfin]

I close this and wait evanw/esbuild#334 resloved, we will support it.

[re-thc]

esbuild has stated they are not directly supporting it.

[intrnl]

I think it'd be best to wait until this comment gets an answer.

We could probably try appending the imports ourselves, not sure about identifier conflicts though.

[yyx990803]

https://vitejs.dev/guide/features.html#jsx

[aleclarson]

@yyx990803 New update on this: evanw/esbuild#334 (comment)

esbuild won't support this OOTB, so Vite needs to maintain an esbuild plugin.

[yyx990803]

That plugin is only for bundling with esbuild. Vite only uses esbuild to transpile J/TSX, not for bundling. So if esbuild is not going to natively support React 17 jsx transforms, people who want React 17 transform in Vite will need to disable esbuild in Vite and use a separate Vite plugin to transpile JSX files, similar to @vitejs/plugin-vue-jsx.

Alternatively, use esbuild.jsxInject option (https://vitejs.dev/config/#esbuild) for now, since React 17 still supports the old transform, most people are just looking to avoid having to manually import React for JSX.

[aleclarson]

I've published v1 of vite-react-jsx which solves this issue.

⭐ https://github.com/alloc/vite-react-jsx