React-Plugin does not respect the jsxImportSource from TSConfig

[seivan]

Description

A user shouldn't have to define jsxImportSource twice, if it's in a TSConfig then it's already defined.
ESBuild (and hopefully Vite) already respects that as far as I know for:
jsxFactory
jsxFragmentFactory

I think the plugin should do that for jsxImportSource as well.

Suggested solution

Read TSConfig.compilerOptions.jsxImportSource ?? options?.jsxImportSource ?? "react"

Alternative

Building a shim for the auto-import and let ESBuild the whole thing instead of using the plugin.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[seivan]

Notes:

• TSConfing "jsx": "react" is opt out of automatic runtime.
• TSConfig defined "jsxImportSource": "react" is default to current settings.
• Anything else, read pass on as is.

Did a go at it.

const jsxImportSrc = tsBuildConfig.compilerOptions.jsxImportSource
const jsxOption = tsBuildConfig.compilerOptions.jsx === "react"
  ? {}
  : jsxImportSrc === "react"
    ? {}
    : { jsxRuntime: "automatic" as const, jsxImportSrc, }


ReactPlugin({ ...jsxOption, })

Worked perfectly with others, like @emotion/react

    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",

and

    "jsx": "react-jsx",
    "jsxImportSource": "react",

[bluwy]

Does esbuild support jsxImportSource? According to https://esbuild.github.io/content-types/#tsconfig-json only a few fields are supported which Vite passes. Maybe this is related to plugin-react and it's babel transform, but regardless it would be great if you can submit the PR so it's easier to view the proposed changes.

[seivan]

All the heavy lifting is already done by the React plugin, this is purely a convenience feature. Making sure that we don't repeat configs and keep one single source of truth.

[alex-kinokon]

Yes, esbuild does support jsxImportSource.

[ArnaudBarre]

Now that jsx transformation is done by esbuild and that the esbuild plugin correctly read this options, it should be as easy as removing this line https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/src/index.ts#L152 for TS projects.

This should also enable multiple runtime per app that someone asked in the discussions.

But I don't know how to handle that for JS project (or more complicated, mixed projects)

[github-actions]

Hello @seivan. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[ArnaudBarre]

Hi!
Just tested with the latest version of Vite and the plugin and it it's already working in fact (with one TS config that specify jsxImportSource and no options for the react plugin).
If you have a more complex usecase not supported please share a repro