Components in pre-bundled packages ( optimizeDeps.include ) do not work with automatic JSX runtime ( @vitejs/plugin-react ) about vite-plugin-react HOT 4 CLOSED

Yes this plugin has some strange behaviour if the files are coming from the project source or from the monorepo. I will remove this in the next major.

The "problem" of network is in fact not one: https://github.com/ArnaudBarre/esm-dev-server-limit
This is just showing that processing files is slow, but the network is not the issue in local.

If you're not using Babel plugins, I would advice to try the SWC plugin, which should allow you to use your ui package as if they were in your app source code with fast refresh and faster cold start

from vite-plugin-react.

Hi!
That's interesting to see someone using optimizeDeps for source code. This is not officially supported cc @patak-dev

I just tested and this make all the @ui package totally stale without a restart --force.

What is the goal of this optimisation? Are hitting some performance issue on a large project?

from vite-plugin-react.

I have a use case for this since I recently extracted common UI components in https://github.com/a-type/gnocchi into a packages/ui shared module in my monorepo. The way I have things set up, shared packages are loaded as TS source directly using composite projects, not transpiled.

Moving the UI components into a separate module has proved problematic, since now each individual module file is being loaded over the network all at once on a page reload, causing a request waterfall/bottleneck during development. I was hoping to be able to combine all these into one request.

I'm not really sure how this behavior differs from what happens if those files were back in the original app source directory, but I definitely noticed the change after moving them.

from vite-plugin-react.

We re-discussed with the team the idea of prebundling for source code. We are not sure now about a support in core but @antfu is experimenting with this https://github.com/antfu/vite-plugin-prebundle. You can try it out and follow the progress!

from vite-plugin-react.