TechDebt/DevEx: replace webpack with Vite/Bun

[fpigeonjr]

Goals

We want to replace webpack with Vite or something else in our project to improve development performance and take advantage of its features.

Tasks

• [x] Research the benefits and features of Vite/Bun compared to webpack
• [x] Update project configuration to use Vite/Bun instead of webpack
• [x] Refactor build scripts and tooling to work with Vite/Bun
• [x] Test the project thoroughly to ensure compatibility and functionality
  • [x] SVGs
  • [x] env variables
  • [x] linting
  • [x] unit tests
  • [x] e2e tests
• [-] css config
• [x] Remove webpack-related dependencies and configurations
• [x] Create an ADR

Additional Context

We have been using webpack as a module bundler for our project, but we have encountered a bug related to the "@babel/plugin-proposal-private-property-in-object" package. This package is not declared as a dependency in "babel-preset-react-app," which we rely on. While it currently works due to the package being present in our node_modules folder, there is a risk of it breaking in the future.

Moreover, "babel-preset-react-app" is no longer maintained as part of the create-react-app project. Therefore, it is unlikely that this bug will be fixed. Considering this, we recommend using Vite or Bun as an alternative, which is actively maintained and provides similar functionality to webpack.

To work around the error, please add "@babel/plugin-proposal-private-property-in-object" to the devDependencies of your project. This step will resolve the current issue and eliminate the warning message.

Resources

• Vite documentation: https://vitejs.dev/
• Bun documentation: https://bun.sh/docs
• Comparison between Vite and webpack: Article on Vite vs. webpack

[jonnalley]

@fpigeonjr great find and kudos for staying on top of things such as this!

[fpigeonjr]

Something I've been thinking about plus our linter warned me about this. The react docs no longer list cra.

[johndeange]

I did some preliminary work on this:

• Installed vite, removed react-scripts, changed scripts to vite
• Configured eslint for vite

I left off with babel errors with fontawesome - might want to try using CSS and fontawesome-free instead

Work is on branch: OPS-1111-vite-poc

[fpigeonjr]

could be related to https://github.com/facebook/create-react-app/issues/11793

[fpigeonjr]

or maybe skip Vite and go to Bun?

[fpigeonjr]

You do not necessarily need to use Vite with Bun for a React app, as Bun natively supports JSX and TSX files and can internally convert JSX syntax into vanilla JavaScript for execution (1) . However, for features like server-side rendering and hot reloading in the browser, an additional tool like Vite is required .

Bun's own reloading methods (bun --watch and bun --hot) do not offer the same behavior as hot reloading in browsers, which is specifically designed for a smoother front-end development experience. Rather, they provide quick reloading of server-side code when changes are detected (2) .

It is also worth noting that while some users have found workarounds to use Bun's tools for development purposes, these are not officially supported solutions and may not provide the expected outcome (3) (4) .

Ultimately, while Bun can run React library and provide certain development features, it is not a front-end development framework per se (1) . Therefore, using a dedicated tool like Vite alongside Bun may yield the best results for developing a full-fledged React application.

[jonnalley]

above seems like it would help in authoring the ADR. :clap

[jonnalley]

12/1