Vite+React+TypeScript环境变量报错：process is not defined

问题核心 #

你已经按Vite文档使用import.meta.env，但仍触发process is not defined报错，说明项目中某个依赖或配置代码仍在尝试访问Node.js的process对象——Vite默认不会在浏览器环境注入process，因此引发该错误。

分步解决方案 #

1. 移除不必要的dotenv导入 #

你的Firebase配置文件中引入了import 'dotenv/config'，但Vite自带完整的环境变量处理机制，dotenv是Node.js环境的工具，在浏览器环境中会引入process变量导致冲突，直接删除这行代码。

2. 修正.env文件格式 #

.env文件中变量值不需要加引号（Vite会自动解析字符串），且确保文件放在项目根目录，无多余空格：

VITE_API_KEY=VALUE
VITE_AUTH_DOMAIN=VALUE
VITE_PROJECT_ID=VALUE
VITE_STORAGE_BUCKET=VALUE
VITE_MESSAGING_SENDER_ID=VALUE
VITE_APP_ID=VALUE

3. 在Vite配置中添加全局变量定义 #

如果是第三方依赖硬要访问process.env，可以在vite.config.ts中通过define选项模拟process对象，避免报错：

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

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

export default defineConfig({
  base: "/job-board/",
  plugins: [react()],
  define: {
    // 空对象避免process未定义，或按需映射特定变量
    'process.env': {},
    // 若依赖需要指定变量，可单独映射：
    // 'process.env.VITE_API_KEY': JSON.stringify(import.meta.env.VITE_API_KEY)
  },
  test: {
    globals: true,
    environment: "jsdom",
    // 测试环境下可单独配置环境变量
    environmentVariables: {
      VITE_API_KEY: "test-key"
    }
  }
})

4. 重启Vite开发服务器 #

修改.env或vite.config.ts后，必须重启开发服务器，否则新配置不会生效。

5. 排查依赖兼容性 #

如果以上步骤无效，检查是否使用了旧版依赖（比如某些firebase工具库），这类库可能仍基于Webpack的process.env编写。尝试升级相关依赖到支持Vite的版本。

内容的提问来源于stack exchange，提问作者Sean