JSX Transform Support in Vite without using pragma

[oriooctopus]

The problem

The use of babel in vite is an anti-pattern as it apparently brings "major performance hits". See vitejs/vite#1742 for more.

However, according to the docs the only alternative to using babel is to use the pragma, which is quite inconvenient in terms of the boilerplate it adds for each usage.

Proposed solution

To add some sort of transformative support for vite similar to what babel does

[Andarist]

AFAIK there is no transform plugin system in Vite since it's esbuild-based. So I'm unsure how we could support this easily without incurring significant performance costs related to transformations. Maybe you could hack around a transformation like this:

transform(code) {
  return { code: `/** @jsx __EmotionJSX */\nimport { jsx as __EmotionJSX } from '@emotion/react'\n${code}` }
}

I leave it to you to figure out how to plug this into Vite though, this simple version would also probably mess up source maps.

Note that this could be supported out of the box by esbuild but the author doesn't seem to be interested in supporting the modern, official, JSX transform. Related issues:
evanw/esbuild#334
evanw/esbuild#718
evanw/esbuild#1172

I'm just not familiar with Vite to prepare this myself, if you'd like to contribute it - I'm open to accepting a PR for this.

[alexbakerdev]

Just a heads up that the first party @vite/plugin-react does use babel. Preconfigured to support the jsxImportSource pragma via babel-plugin-transform-react-jsx

Not sure about how this affects performance, but source maps are all good.

[srmagura]

Seems like your options are:

• Use @vite/plugin-react, which uses Babel
• Use @jsx pragma in every file
• Wait for Vite / ESBuild to natively support the jsxImportSource option — or something else that would achieve the same effect

While I don't think there are any code changes we can make to improve this situation, I can add a blurb about this to our documentation site.

[alextompkins]

I made a plugin for esbuild which may solve this issue for you. It works by substituting the @jsxImportSource pragma with the @jsx one which esbuild supports natively.

https://www.npmjs.com/package/esbuild-plugin-jsximportsource

[RichiCoder1]

For anyone coming to this thread now, this is officially supported in esbuild now: https://github.com/evanw/esbuild/releases/tag/v0.14.51