Error ' ...does not provide an export named 'jsx' '

[DrUNE]

Hi, when i update dependency @vitejs/plugin-react in library-monorepo-demo to latest version 4.0.0 i get error after starting app in dev

The rest npm scripts ( build or ssr )continue working fine.
There is any thing i should configure to make dev script to function properly?

[csr632]

I think it is caused by vitejs/vite-plugin-react#132 introduced in @vitejs/plugin-react@4.0.0.
Currently you can work around it by adding this vite config:

// vite.config.js

optimizeDeps: {
    include: ["react/jsx-runtime", "react/jsx-dev-runtime"]
}

I will look into it and find the actual fix in this weekend.

[ArnaudBarre]

The repo link is also the team name so I was notified about this issue.
Part of the commit was revert before stable. But only jsxDev is optimized, not the prod one. is this something wanted to run the production mode of React in dev?

[csr632]

is this something wanted to run the production mode of React in dev?

@ArnaudBarre I think it should support "react/jsx-runtime" during dev.

Because npm packages may transform jsx code into "js code with react/jsx-runtime" before published. And users may use these packages during dev. That cause "react/jsx-runtime" being imported during dev.

In this specific case, our framework have some client code that is built into "js code with react/jsx-runtime":
https://unpkg.com/browse/vite-plugin-react-pages@4.1.1/dist/client-bundles/entries/App-f51ce870.js

Another example is component library: https://unpkg.com/browse/@mui/material@5.12.3/Button/Button.js

[ArnaudBarre]

I'm surprised that this is not pick by Vite if this is in the dependency code. Sounds like very common to have a lib use in dev that is only present in node_modules

[csr632]

I'm surprised that this is not pick by Vite if this is in the dependency code. Sounds like very common to have a lib use in dev that is only present in node_modules

Yes. If the npm package is optimized by vite, importing react/jsx-runtime would not being an issue, because vite optimization will take care of cjs interop. But I think @vitejs/plugin-react should not rely on vite optimization because there are many complicated reason that make vite skip optimizing some packages.

In this specific case, I add vite-plugin-react-pages to optimizeDeps.exclude because I have pre-bundled the package code to save some optimization time for users.

Could @vitejs/plugin-react add react/jsx-runtime to optimizeDeps.include? Or aliasing it into react/jsx-dev-runtime during dev?

[ArnaudBarre]

The small issue here is that now all users will pre-bundle this package even if not used.

I'm surprised that the missing entry creates an error instead of late optimisation + page reload on cold start

[csr632]

I'm surprised that the missing entry creates an error instead of late optimisation + page reload on cold start

You are right. Vite should found out that some imported package need optimization.

I have created a reproduction: https://stackblitz.com/edit/vitejs-vite-euyrbc?file=src%2FApp.tsx,vite.config.ts,package.json&terminal=dev

mui encounter similar issue with prop-types in this demo. We have to add mui package to optimizeDeps.exclude to see that error.

[csr632]

I fix this in on vite-plugin-react-pages's side by adding react/jsx-runtime to optimizeDeps.include (193d4e9) . Also upgraded all templates to use @vitejs/plugin-react@^4.0.0.

By the way, I think vite (or @vitejs/plugin-react) can do better on their side.