Cloudflare vite plugin and optimizeDeps don't seem to work.
I have a RR7 app that I just migrated to the Cloudflare vite plugin (historically used the Remix cloudflare dev proxy). When I run the app, it tries to optimize deps, and is extremely slow (program reload that Vite triggers are really slow when combined with the Cloudflare runtime startup). I've tried everything to get the dependencies to optimize ahead of time configuring vite OptimizeDeps in every ways possible. I discussed with the Vite and RR7 teams, nothing seems to work.
Right now I'm wondering if there's something in the Cloudflare plugin preventing optimizeDeps from working. I see in the source code it sets optimizeDeps but mostly for excludes, and doesn't seem to mess with includes. You can see the behavior if you create a new RR7 app using the react-router-template "cloudflare". If you clear the vite cache and run the app, you'll see dependencies getting optimized lazily, and you won't be able to prevent them from doing so even configuring optimizeDeps.
Not sure its an issue with the Cloudflare vite plugin, but no one else seems to know whats up 🙂
4 Replies
One thing I can recommend trying is to set
optimizeDeps.entries to the proper entrypoint (for example, src/main.tsx) to force vite to optimize everything on the first go from that file
As far as I would know, this would not be CF plugin related, however that's not my area of expertiseIt turned out being partly skill issue in my side, and the plugin.
Skill issue because I missed in the doc that when using the plugin with React Router 7, the vite environment ssr setting is NOT optional, else things don't get setup correctly.
Then yeah, you need to set the entries properties. React Router has a flag that sets entries automatically on the client environment. The Cloudflare plugin creates an environment names after the worker (or merge it with the "ssr" environment if using the proper setting for RR7), and setting the entries there solved the problem.
A cross section of RR7, Vite and the Cloudflare plugin needing to work together juuuuuuust right.
Glad you could figure it out! Surprised React Router doesn't deal with setting up SSR for you (it's a vite plugin, right?)
in the end it does. The Cloudflare docs from you folks state to use viteEnvironment SSR to merge the SSR environment and the Worker's environment since its required. I thought that config was optional (I had a separate, unrelated issue with it that would go away when I did NOT set it up, so I thought I could just get rid of it. Didn't realize it was mandatory in Vite until I found the docs for it). Once i cleared that up it all worked as documented.
It was a case where the doc was perfect but didn't go deep enough in the "why" of things, so I didn't follow it carefully enough. Skill issue on my part I suppose.