Replace `craco` / `webpack` frontend module bundler with `vite`

[spwoodcock]

Is your feature request related to a problem? Please describe.

• We currently use craco, which is a custom wrapper for webpack and probably not recommended going forward.
• For context, we have recently undergone a large dependency upgrade for the frontend.

Describe the solution you'd like

• Now deps should be updated, we should also migrate to vite, a more modern module bundler.
• Speed: vite will include rolldown in future, a high-performance re-write of rollup in Rust.
  • Faster production builds.
  • Faster dev server reloads.

Describe alternatives you've considered

• Bun, but it's still to early.

Related to #5499

[JoltCode]

Another alternative for the list to consider is rspack - https://rspack.dev/ 😄

[spwoodcock]

Have you used rspack before?

From my understanding: webpack --> rspack rollup + esbuild --> rolldown (+vite) Both are rust libraries build to speed up bundling, doing the same thing.

It's hard to assess what the pros / cons of each might be though!

[!NOTE] Update - I really like the look of where rolldown and the oxc compiler are going. It seems like a solid foundation for the future of bundling, but I could be wrong!

[JoltCode]

Have you used rspack before?

From my understanding: webpack --> rspack rollup + esbuild --> rolldown (+vite) Both are rust libraries build to speed up bundling, doing the same thing.

It's hard to assess what the pros / cons of each might be though!

Note

Update - I really like the look of where rolldown and the oxc compiler are going. It seems like a solid foundation for the future of bundling, but I could be wrong!

Yeah exactly.

And I have used it - although only on a side project - in my opinion I think it's better for us to go with Vite, for the same reasons which you listed.

Let's just go for vite 😄

[spwoodcock]

[!NOTE] Based on discussions, this isn't such a simple task, as it involves renaming all .js files to have a .jsx extension if they are React components...