How to migrate from Parcel to Vite

2 min readJan 3, 2024

This article goes over how to migrate from Parcel to Vite.

package.json

Uninstall parcel:

npm uninstall parcel

Install vite:

npm install --save-dev vite

Remove “source” and update “scripts”:

 {
-  "source": "public/index.html",
   "scripts": {
-    "build": "parcel build",
+    "build": "vite build",
+    "preview": "vite preview",
-    "start": "parcel --open"
+    "start": "vite --open"
   }
 }

Environment Variables

Environment variables need to be prefixed with VITE_. For example:

-GOOGLE_ANALYTICS_ID=abc123
+VITE_GOOGLE_ANALYTICS_ID=abc123

Replace process.env. with import.meta.env.VITE_:

git grep -l 'process.env.' | xargs sed -i '' -e 's/process.env./import.meta.env.VITE_/g'

Replace process.env.NODE_ENV checks with import.meta.env.DEV. For example:

-if (process.env.NODE_ENV === 'development') {
+if (import.meta.env.DEV) {

If you’re using TypeScript, create a type declaration file:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly DEV: boolean;
  readonly VITE_GOOGLE_ANALYTICS_ID: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

index.html

Move index.html to the root:

find . -type f -name index.html -print0 | xargs -0 -I {} mv {} $(git rev-parse --show-toplevel)

Update all scripts, links, and asset paths.

vite.config.mjs

Create a vite.config.mjs if you’re using plugins. For example:

import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react()],
});

TypeScript

If you’re getting the error:

error TS2307: Cannot find module './file.png' or its corresponding type declarations.

Then update your type declaration file:

declare module '*.png' {
  const src: string;
  export default src;
}

Port

Replace localhost:1234 with localhost:5173:

git grep -l 'localhost:1234' | xargs sed -i '' -e 's/localhost:1234/localhost:5173/g'

CI

Update your environment variables with the VITE_ prefix.

If you’re using Parcel’s --public-url option, replace it with Vite’s --base:

git grep -l '\-\-public-url' | xargs sed -i '' -e 's/--public-url/--base/g'

If you’re running the Vite server in CI, you’ll need to pass the --host option:

npx vite --host

Examples

This article was originally published on remarkablemark.org on December 24, 2023.