[@vitejs/plugin-react] Don't apply automatic jsx runtime to dependencies

[MarcPorciuncula]

Description

I am using @vitejs/plugin-react with the jsxImportSource option to automatically apply the @emotion/react jsx transform.

It seems that currently the vite-react plugin attempts to transform dependencies that use the classic runtime to use the automatic runtime and adds an import to the supplied jsxImportSource (ie. import ... from '@emotion/react/jsx-runtime) into those dependencies.

In my project, there is a dependency that is being transformed to use the automatic runtime but it does not have access to import from @emotion/react due to the node modules directory structure (I'm using pnpm which is stricter on dependency access). Because of this, I get a build error:

Error: [vite]: Rollup failed to resolve import "@emotion/react/jsx-runtime" from "...(path to dependency)".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

It also seems to do this regardless of the include/exclude filter options that can be passed to the plugin.

Suggested solution

This could be fixed if there was a way to disable the behaviour of upgrading the classic jsx runtime to the automatic jsx runtime in dependencies. Probably via some option in the vite-react plugin ({ upgradeJsxRuntimeInDependencies: false } or similar).

It might be nice to also mention that the plugin does this in the readme for the plugin as it does affect dependency code that you might not otherwise expect to be targeted by the plugin, even when you specify a filter.

Alternative

No response

Additional context

---

Code in the react plugin that transforms dependencies:

https://github.com/vitejs/vite/blob/0cbb33bade1b10c1503f47f8f8ed6e3b39818066/packages/plugin-react/src/index.ts#L219-L233

Note I was able to get my code to compile by manually editing the plugin and replacing line 227-230 with const [restoredAst, isCommonJS] = [null, false], avoiding restoreJSX altogether.

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]

Nice going with debugging that, I got the same issue.

It also seems to do this regardless of the include/exclude filter options that can be passed to the plugin.

This actually sounds like a bug. But the comment there gives the impression it's not since it seems to actively (!isProjectFile) target dependencies to modify their JSX output.

I can't say if that's necessary, I mean it could be since you can't know what output bundled dependencies have.

But your take on it to be able to opt out of it makes a whole lot of sense.
Is there a consensus on wether or not dependencies should be transformed like that or not?

[sorenhoyer]

Citing https://github.com/vitejs/vite/tree/main/packages/plugin-react#opting-out-of-the-automatic-jsx-runtime

"By default, the plugin uses the automatic JSX runtime. However, if you encounter any issues, you may opt out using the jsxRuntime option."

So setting

react({
  jsxRuntime: 'classic'
})

Should basically do the same thing.

I do however think they should make it more granular, so that you can specify which packages you want to opt out from using the automatic jsx runtime.

[MarcPorciuncula]

@sorenhoyer yes you can use the classic runtime to disable the behaviour but I think that defeats the purpose in the case that you want to change jsxImportSource, as that's an option to configure the automatic runtime.

The issue I'm trying to get at here is not that the automatic runtime is enabled by default but that the dependencies are being transformed from the classic runtime to use the automatic runtime when I do not need/expect them to be.

[sorenhoyer]

@MarcPorciuncula my bad. You're absolutely right. :-)

[sapphi-red]

Closing as the classic-runtime-to-automatic-runtime transforming feature (restoreJSX) was removed by vitejs/vite#9590.