Converting Large Codebase Project from Webpack to Vite

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:

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

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.

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

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

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