Making Vite the Default Web Bundler: Feedback Wanted

Since Redwood v4.1, Vite has been an experimental option for the Web bundler (replacing Webpack). See this post for more info.

Our next initiative is to make Vite the default bundler in an upcoming major version. We are working on a plan and will communicate how we intend to make the transition.

Current draft of rollout plan:

  • switch to Vite as default Web bunder in next major
  • still support Webpack as an option (will give deprecation warning for Webpack)
  • we will continue supporting Webpack for an undefined number of major versions (TBD)
  • will then remove Webpack as an option in a following major to be determined

You can follow along with progress over here:

Feedback Wanted

Although out intention is to keep as much config “under the hood”, we know some projects require extending Webpack config. This upgrade could be a source of pain, learning yet-another-javascript-thing that feel like it’s in the way of shipping features.

This is our least favorite thing about this ecosystem.

Please help us understand your circumstances, your needs, and your concerns. The more we know ahead of time, the more we can make this a good transition, together.

And if you’re particularly excited about this, we’d like to know that, too!

Why Vite?

@danny has been lead on this initiative, so I’ll let him answer this question in full.

As someone who doesn’t want to care about the tools under the hood (meaning that they’re not in the way), in this case I care deeply about Redwood’s next Epoch and the technology we need to reach it. And Vite is going to play a foundational role toward that end.

And that’s something I hope you can get excited about, regardless of bundler :rocket:


I’ve switched to the experimental Vite option for about 2 months now and have been very happy with the switch. Its responsiveness definitely makes the development experience much better. There were a couple of issues that I ran into which I wonder if could be resolved somehow. I don’t believe these are blockers for using Vite as our default bundlers. They’re something that would make DX better.

One is this … on rare occasions, it’s useful and convenient to make direct changes into the code of a node_modules package (like adding console.log or trying out a simple bug fix idea). Of course this must be done with care and undone asap. I believe this scenario just works intuitively with Webpack due to rebundling. Vite seems to have a caching layer that ignores changes under node_modules. Even restarting the dev server did not work. This may be an aspect of Vite that is not avoidable from the Redwood side. I’m bringing it up here in case it may spark an idea.

The second is the hope that plugin configuration could be made easier (plugins for vite, esbuild, rollup). Again, I don’t know enough to know if it’s possible, but it would be amazing to make plugin configuration (almost) as simple as configuring them directly for vite/esbuild/rollup, i.e., without necessarily having to understand how Redwood uses those tools.

Most plugins provide instructions that don’t take into account the relationship with frameworks like Redwood, e.g. webpack plugins typically only provide instruction to setup with webpack.config.js. My experience so far has been that it would take an additional round of google searches, readings, and wrapper writing set things up properly.

Perhaps it could be done by making vite/rollup/esbuild config files available at the root of Redwood projects and import Redwood specific settings from there? That way, direct configuration is possible at the project’s discretion.

1 Like

Thanks for the feedback @tvo, sorry didn’t spot this earlier.

on rare occasions, it’s useful and convenient to make direct changes into the code of a node_modules package

Understandable, and the best way to deal with this would be one of 3 ways:

a) Restart your dev server with yarn rw dev --fwd="--force true" this will cause a forced reoptimisation of your dependencies from node_module.

b) Alternatively, and I think easier, is if you type in rs (then press enter) while the dev server is running, it will restart both web and api, and force a reoptimisation of your node_modules.
^^ admittedly this isn’t documented (because Vite was alpha) - I’m really not sure where in the docs this should go

c) Change your vite.config.js to set optimizeDeps to be forced optimized: Dep Optimization Options | Vite or exclude certain modules from optimisation Dep Optimization Options | Vite

the hope that plugin configuration could be made easier (plugins for vite, esbuild, rollup).

The vite.config.js/ts file sits in your web folder, and gives you full control to customise your Vite setup however you wish. This includes, esbuild and rollup settings as well - and no different from configuring Vite without Redwood - no extra searching!

The Redwood specific settings sit in a plugin:

1 Like

Thank you @Danny . These are very useful tips!