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

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. 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!
• Why Vite
• 4 Reasons Why You Should Prefer Vite Over Create-React-App (CRA)

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 - Give vite the ability to resolve imports using TypeScript's path mapping.

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

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 - Vite plugin to transform SVGs into React components. Uses svgr under the hood.

...
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.

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

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

svg ref is null

add an option ref in svgr

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.

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

'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 & { 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.

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

To

...
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 and defined global in vite.config.ts.

// 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.

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!