# Migrating a component to ViteJS

ViteJS uses `esbuild` to build the frontend bundles and because of that some of the syntax we were using in Javascript, that was transpiled by `babel` will not be supported anymore. Things like default export syntax (`export SomeComponent from './some_file'`) and Flow are not possible to be built with ViteJS.

So, in order to migrate a component to ViteJS you can follow two paths:

## Migrate the component to Typescript

If the component is wrote in Typescript it is already ready for ViteJS, all you need to do is move the entrypoint file from `packs` folder to `entrypoints` and change the helper tags (more on this later).

## Migrating a Javascript component

To migrate a Javascript component to ViteJS we need a few extra steps to make it buildable by `esbuild`

#### 1. Rewrite exports that's not ECMAScript compliant

You can do this by running the following search & replace regex:

Find regex: `export\s(\w+)\sfrom\s(.*)`

Replace regex: `export { default as $1 } from $2`

#### 2. Strip Flow typings

You just need to run the command `npx flow-remove-types -a components/<your component> -d components/<your component>`. Keep in mind that this tool leaves a lot whitespaces, to fix this you can run `prettier -w`

#### 3. Remove jsx-control-statements

TBD

#### 4. Add `scss` extension to styles import if missing

## Move entrypoint and replace helper tags

Once the component is ready to build by `esbuild` we can move the entrypoint file from `packs` folder to `entrypoints`.
Then, replace the Rails helper tags in views:

Replace

<% javascript_packs "component" %>

<%= react_component("Component") %>

For

<%= vite_client_tag %>
<%= vite_react_refresh_tag %>
<%= vite_typescript_tag "component" %>

<%= render_app "Component" %>

## Migrated components

* [nitro_react](https://github.com/powerhome/nitro-web/pull/31313)