jsxInject: Maybe not a good idea yet

[deleonio]

The jsxInject is only implemented in vite, not in esbuild or anywhere.

The app code is not runnable in general without JSX imports, with @webpack or @snowpackjs.

preset-vite/src/index.ts

Line 17 in b329a20

jsxInject: `import { h, Fragment } from 'preact'`,

Maybe it is possible to comment out this option until it is supported by @evanw (esbuild) / @babel etc. itself.

[deleonio]

https://www.typescriptlang.org/tsconfig/#jsxImportSource

[deleonio]

I think a common way for all bundlers to do this would be to use the esbuild option.

In dev case add preact.shim and devtools.shim.

In prod case only preact.shim.

The shim file could be provided from the preact module self.

https://esbuild.github.io/api/#inject

[lxndrdagreat]

I just came across this problem today. I'm pretty new to Vite, but fairly familiar with Preact. I am trying to add tests via Mocha, but with jsxInject being set in the plugin, it means my components can't have the import { h } from 'preact' in them. This leads to the following error in my tests: ReferenceError: h is not defined.

Is there some other way of going about solving the issue from the testing side? With my limited knowledge, I haven't found a solution. The only way I've been able to get both Vite and Mocha happy is to add a plugin that returns this block for the config esbuild:

esbuild: {
  jsxFactory: 'h',
  jsxFragment: 'Fragment',
  jsxInject: ''
}

For some reason just including that in the outer Vite config didn't work... I had to make it a plugin. This allowed me to get things working by manually adding import {h} from 'preact' at the top of my components.

[rschristian]

Looks like the option will be deprecated shortly anyways, see vitejs/vite#2369 (comment)

[commenthol]

With #18 being accepted you should be able to define/ overwrite the jsxInject string on plugin setup.