Fixing "Uncaught ReferenceError: process is not defined" in Vue with Vite

Problem

When working with Vue and TypeScript projects using Vite as the build tool, you may encounter the error "Uncaught ReferenceError: process is not defined" when trying to access environment variables through process.env.

The typical problematic code looks like this:

const isProduct = process.env.APP_ENV === "prod";

This error occurs because Vite, unlike Webpack, doesn't provide a global process object by default. Vite uses a different environment variable system built on ES modules.

Solution

Method 1: Use Vite's Native Environment Variables (Recommended)

Vite provides import.meta.env as a replacement for process.env. Environment variables must be prefixed with VITE_ to be exposed to your Vue application.

1. Update your environment file (.env):

VITE_APP_ENV=prod
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Vite App

2. Access variables in your code:

const isProduct = import.meta.env.VITE_APP_ENV === "prod";
const apiUrl = import.meta.env.VITE_API_URL;

// Vite also provides built-in environment flags
const isDevelopment = import.meta.env.DEV; // true in development
const isProduction = import.meta.env.PROD; // true in production

TIP

Vite automatically exposes variables prefixed with VITE_ from your .env files. Other variables remain server-side only for security.

Method 2: Configure Vite to Support process.env (Workaround)

If you need to maintain compatibility with existing code that uses process.env, you can configure Vite to provide a process.env object:

1. Update your vite.config.js file:

import { fileURLToPath, URL } from "node:url";
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return defineConfig({
    define: {
      "process.env": env,
    },
    plugins: [vue()],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
  });
};

2. Use environment variables as before:

const isProduct = process.env.APP_ENV === "prod";

WARNING

This approach exposes all environment variables to the client, which may pose security risks if sensitive data is included.

Method 3: Client-Side Fallback (Not Recommended)

As a temporary development fix only, you can define process.env in your component:

mounted() {
  // Only for development - not production safe
  if (import.meta.env.DEV) {
    window.process = {
      env: {
        NODE_ENV: 'development'
      }
    };
  }
}

DANGER

This approach is not recommended for production code as it's a workaround that doesn't properly handle different environments and may cause unexpected behavior.

Best Practices

1. Use Vite's native import.meta.env system for new projects

2. Prefix all client-side environment variables with VITE_

3. Use different .env files for different environments:

   • .env - Default, included in all environments
   • .env.development - Development environment
   • .env.production - Production environment
   • .env.local - Local overrides (gitignored)

4. Access API URLs securely:

// Good practice - using Vite's environment variables
const { data } = await axios.post(
  `${import.meta.env.VITE_API_URL}/register`,
  {
    name,
    email,
    password,
  }
);

Migration Tips

If you're migrating from Vue CLI to Vite:

1. Rename all VUE_APP_ prefixes to VITE_ in your .env files
2. Replace all process.env references with import.meta.env
3. Update your build scripts to use Vite's commands instead of Vue CLI's

Conclusion

The "process is not defined" error in Vite occurs because Vite uses modern ES modules instead of Node.js-style process.env. The recommended solution is to use Vite's native import.meta.env system with VITE_ prefixed environment variables. For legacy code compatibility, you can configure Vite to provide a process.env object, but be aware of the potential security implications.