How to have sx with vite?

[estaub]

Has anyone successfully run theme-ui with vite and typescript? I can't get it to work.
Specifically sx is not translated.
I'll elaborate if anyone has any experience, but briefly:

• I am using /** @jsxImportSource theme-ui */ in the sx file.
• I am using the tsconfig.json provided in How to compile a library that uses theme-ui with typescript? #960 (comment) .

[estaub]

I realized overnight that the same problem would probably occur with emotion+vite (without theme-ui), so I searched for that, and found https://dev.to/ajitsinghkamal/using-emotionjs-with-vite-2ndj . A fix for this problem is to add an esbuild section to vite.config.ts, that tells how to deal with jsx:

export default defineConfig({
  plugins: [reactRefresh()],
  esbuild: {
    jsxFactory: 'jsx',
    jsxInject: 'import {jsx} from "theme-ui"',
  }
})

With this approach, there's no need for the jsxImportSource pragma:

/** @jsxImportSource theme-ui */

Note that this is probably also dependent on "jsx": "preserve" in my tsconfig.json.