How to Remove Vite from a React.js Project

React.js is a popular JavaScript framework used for front-end development of web applications. Most software developers often make comments on how creating a new React.js application takes a long time if you use the conventional React.js documentation.

npx create-react-app my-app
cd my-app
npm start

With the growth of the state of web development over the years, there are tools like Vite and Parcel that have been created to support development while using modern frameworks and even programming languages.

Vite

In this case, we are talking about Vite, which is said to be the "Next Generation Frontend Tooling" that enables you to get ready for a development environment that can finally catch up with you. Vite offers these unique features:

Instant server start
Lightning fast HMR
Rich features, i.e, it supports Typescript, JSX, and CSS among others
Optimized build
Universal plugins
Fully typed APIs

How to Install Vite

// With NPM
npm create vite@latest
// With Yarn
yarn create vite

How to Set Up a React.js Project with Vite

$ yarn create vite

When you run the command, you see output like this on your terminal, and it requires you to select a Vite project name

// output
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@4.1.0" with binaries:
      - create-vite
      - cva
? Project name: › vite-project

You can name it react-vite-1 Just type it and it will replace the highlighted vite-project

react-vite-1

When you enter the project name, you'll get an output that requires you to select a framework you want to work with. You can scroll with the down and up arrows to select the one you want to work then submit. For this case, we'll select React

// output
✔ Project name: … react-vite-1
? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

After selecting a framework, we have to select a variant that is either Javascript or Typescript template

// output
✔ Project name: … react-vite-1
✔ Select a framework: › React
? Select a variant: › - Use arrow-keys. Return to submit.
❯   JavaScript
    TypeScript
    JavaScript + SWC
    TypeScript + SWC

We can select the typescript Once our project is scaffolded successfully, we can run the following commands

cd react-vite-1
yarn
yarn dev

With this, you can go ahead and build your React.js project of choice that uses typescript So you have to adhere to the different types also uses Vite to ease the development process, like starting live on localhost, installing packages, and even bundling.

Removing Vite from a React.js Project

At times, you're working on a project and you initialized using Vite, but you get to some point while building and get an error like Vite not being able to bundle an import of images within a useEffect hook and you need to remove Vite since you can't debug the issue within the short time you have, even though

Follow these steps to remove Vite:

Remove the Vite dependency from your project by running the following command :
```
 npm uninstall vite
```
Remove the vite configuration file named vite.config.js from your project root folder

Update your package.json file to remove any Vite-specific scripts or configurations:

 "scripts": {
   - "start": "vite",
   + "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   ...
 }

Update any imports that may have been using Vite-specific aliases or paths, e.g, use of @ to import files from the src folder with vite. This might bring a lot of issues, but take your time to ensure all imports are well-imported
Add index.html file public folder with a div that has a root id
Run npm install to ensure all dependencies are up to date and any unused packages are removed. At this point, Vite is removed from your project, and you can continue building your project.
Ensure that when you start the server, it can detect some browsers by adding the defaults to your package.json file in your React app. Run the following commands in your terminal
```
 npm install postcss autoprefixer
 npx browserslist // generates list of targeted browsers
```
Go back to your package.json file and add a browserlist section at the top next to the scripts, like this
```
 {
   "name": "my-react-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     // your dependencies
   },
   "browserslist": [
     "last 1 version",
     "> 1%",
     "not dead"
   ]
 }
```
Thank you for reading through my article. You can leave a comment. I've been a bit inconsistent in terms of writing, but hoping to write more soon. Have a good time, and I hope to read yours too.