Converting Large Codebase Project from Webpack to Vite

Photo by Roberto Nickson on Unsplash

In the company I work at, our frontend codebase consists of couple of thousands files. The framework is React 16 and the bundler used was webpack 4.

Reasons

We wanted to change the bundler to vite for two main reasons:

1. DX - development experience - Faster boot time from starting the development server to seeing the project on the browser and start coding.
2. DX - Faster production build time for qa envionments.

Process

So we took the opportunity in the company hosted hacketon and built a POC that worked. The POC was mapped after that to separated individual tasks.

1. This to tackle each migration step more cleanly without disrupting existing features development.
2. Have the developers and interested parties participate in the CRs and give their takes and experience.

Steps

This article summarize the issues that rose and how they were handled.

1. Converting couple thousands Js/Ts files that contains JSX content to jsx extension
2. Js Errors - Using variables before declaration
3. lingui swc plugin replacement for babel macros - does not work for now on .js files
4. Third party libraries unconventional import - react-d3-tree
5. Css mixin implicit import
6. Unsupported js decorator used in .js files
7. Need for async/await transpilation which use bluebird cancelable feature
8. Third party node modules that import sub third party node modules needs to prebundle explicitly
9. Unconventional node modules import - "../../../node_modules/date-fns"
10. Code that use global, process and other node environment variables needs polyfill or mock
11. Code that use require instead of import
12. webpack only syntax for hmr needs to be converted to vite syntax
13. Webpack multiple import statement needs to be converted to vite supported syntax
14. Webpack raw loader needs to be converted to vite raw loading
15. Converting index.html dynamic generation instead to work also with vite
16. Mock process.cwd for react-markdown vfile