Issues that I encountered and how to deal with them while migrating from CRA to Vite
Tags: react, webdev, vite, javascript
Published: 2023-01-09 00:18:37

> Issues that I encountered and how to deal with them while migrating from CRA to Vite

I joined this company 6 months ago. Since the deadline of my team was behind the schedule, my team had focused on developing new features and fixing bugs last year. In a frontend meeting this week, an idea came up that to switch from CRA to another one. We had some problems with our projects.

There are a few below.

- Slow start up time of dev server *(It takes more than 10 seconds)*
- `HMR`(Hot Module Replacement) is slow *(It takes few seconds)*
- Phantom Dependencies **(Import Unintended Packages) w/npm **

These are the problems we wanted to solve first. `CRA` has not been maintained actively these days. I didn't think that `CRA` would solve it in the near future. So, we were looking for some alternatives and we decided to go with [Vite](https://vitejs.dev/). We expected that `Vite` can solve the problems.

The below links are part of the links that I read. There are a lot of benefits using `vite`. I recommend you to search for it if you want to know more. (Like why `Vite` picked both `esbuild` and `rollup` to build, why `Vite` is faster than `cra`, what `SWC` is...) 

- [Vite 4.0 is out!](https://vitejs.dev/blog/announcing-vite4.html)
- [Why Vite](https://vitejs.dev/guide/why.html)
- [4 Reasons Why You Should Prefer Vite Over Create-React-App (CRA)](https://semaphoreci.com/blog/vite)

I took on this task and I have worked in the last few days.
I will share issues that I encountered while migrating from `CRA` to `Vite`.

I don't think I did it the proper way, so, instead of how I migrated, I will focus on the issues and how I dealt with them.

A project that I switched to `Vite` uses `antd` as an UI framework and it didn't have specific customized configuration for `webpack` or something else. 
I went the vite project with `typescript` + `SWC` using `pnpm`.

---

## Issues

### `baseUrl` does not work in `tsconfig.json`

[vite-tsconfig-paths](https://www.npmjs.com/package/vite-tsconfig-paths) - Give `vite` the ability to resolve imports using TypeScript's path mapping.

Install `vite-tsconfig-paths` and inject it into `vite.config.ts`.

```typescript
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
})
```

---

### imported svg doesn't export react component

[vite-plugin-svgr](https://www.npmjs.com/package/vite-plugin-svgr) - Vite plugin to transform SVGs into React components. Uses svgr under the hood.

```typescript
...
import { ReactComponent as Register } from 'assets/icon/register.svg';
...
```

It occurred an error `imported svg doesn't export react component`.

To solve it, install `vite-plugin-svgr` and inject it into `vite.config.ts`.


```typescript
// vite.config.js
import svgr from 'vite-plugin-svgr'

export default {
  // ...
  plugins: [svgr()],
}
```

---

### svg ref is null

add an option `ref` in svgr

```typescript
svgr({
  svgrOptions: {
    ref: true,
  },
}),
```

---

### Inline JavaScript is not enabled. Is it set in your options?

To use `less` in `Vite`, just install a package `less`, `vite` does the rest for you.

Then, if it displays the error `Inline JavaScript is not enabled. Is it set in your options?`, set `javascriptEnabled` to `true` in `vite.config.ts`.

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
});
```

---

### location is undefined  5.3.x -> 5.2.0

I solved it by changing the version of `react-router-dom` from `5.3.x` to `5.2.0`.

---

### Environment Variables

To define environment variables' name, In `Vite`, you must put `VITE_` instead of `REACT_APP_`.

To use the variables, you have to use `import.meta.env` instead of `process.env`. 

[Vite env-and-mode](https://vitejs.dev/guide/env-and-mode.html)

---

### 'DatePicker.RangePicker' cannot be used as a JSX component. 

This issue happened by upgrading `react` version in my case. I did downgrade from `react 18` to `react 17`.

---

### Type 'FunctionComponent<SVGProps<SVGSVGElement> & { title?: string | undefined; }>' is not assignable to type 'string'.

I didn't know exactly why it didn't work the same way with `CRA` though, I solved it using `require`.

```typescript
import { ReactComponent as something } from 'something.svg';
...
<img src={something} />
...
```

To

```typescript
...
import something from 'something.svg';
...
<img src={something} />
```

---

### Could not find a declaration file for module 'history'

I thought it happened because I didn't install the type package. Even after installing the latest version of type package of the `history`, there was still an error.

https://github.com/facebook/create-react-app/issues/12153

I referenced it and solved by downgrading the version.

---

### global is not defined

When I started the dev server, the error `global is not defined` displayed in the terminal. 

I saw a solution in [github issue](https://github.com/vitejs/vite/issues/2618) and defined `global` in `vite.config.ts`.

```typescript
// https://vitejs.dev/config/
export default defineConfig({
 ...
  define: {
    global: "window",
  },
  ...
});
```

It had no error in dev but, somehow, when I built the project, `global` caused an error. When it didn't have `global`, the error was gone while building. 

I'm still not sure why it didn't work though, I solved it by defining `global` only in dev.

```typescript
define: {
  ...(process.env.NODE_ENV === 'development' ? { global: "window" } : {}),
  },
```

---

## Conclusion

After finishing it, I achieved below things.

- The time of starting dev server takes less than one second
- When I save a file, it refreshes instantly
- Found use of uninstalled dependencies (`pnpm`) and fixed them

Currently, it's been applied to the development server and we've been checking that the project is working fine. It looks fine so far.

We're going to keep searching for the components of `Vite` for a while to get to know it better. 

I hope you found it useful.

Enjoy your coding!