Skip to content

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

@MarcPorciuncula

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions