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

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] 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.