本地启动Vite项目遇栈溢出错误，.env文件致问题求助

问题描述 #

本地启动React+Vite项目，更新Node和npm后仍报错：failed to load config from vite.config.js (RangeError: Maximum call stack size exceeded)，删除.env文件后项目可正常运行，保留该文件则触发报错。

原因分析 #

1. .env文件循环引用：你的.env中使用了GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}这种变量自身引用自身的写法，Vite在解析环境变量时会递归处理该引用，导致无限循环，最终触发栈溢出错误。
2. define配置放大问题：vite.config.js中直接将整个env对象赋值给process.env，会让Vite尝试将所有环境变量注入到代码中，包括这个循环引用的变量，进一步加剧了递归解析的栈占用。
3. 冗余依赖冲突：package.json中包含react-dotenv，该依赖与Vite自带的环境变量处理机制可能存在冲突，干扰env解析流程。

解决方案 #

1. 修正.env文件的变量定义 #

删除循环引用的写法，直接填写实际值，或引用已存在的外部环境变量（非自身）：

BASE_URL=http://localhost:5173
# 填写实际的客户端ID，或确保系统环境中存在对应变量
GOOGLE_CLIENT_ID=your_google_client_id
GITHUB_CLIENT_ID=your_github_client_id
# 注意：GITHUB_CLIENT_SECRET不应暴露在前端代码中，建议通过后端接口调用
# GITHUB_CLIENT_SECRET=your_github_secret

如果需要读取系统环境变量，确保系统中已设置对应变量，写法如下（类Unix系统）：

GOOGLE_CLIENT_ID=$GOOGLE_CLIENT_ID

2. 优化vite.config.js的define配置 #

避免将整个env对象注入到process.env，只注入前端需要的变量，同时避免暴露敏感信息：

import react from '@vitejs/plugin-react';
import { defineConfig, loadEnv } from 'vite';
import macrosPlugin from 'vite-plugin-babel-macros';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');

  return {
    plugins: [react(), macrosPlugin()],
    root: './',
    build: {
      outDir: 'dist',
    },
    publicDir: 'src',
    server: {
      fs: {
        allow: ['..'],
      },
    },
    define: {
      // 仅注入前端需要的非敏感变量
      'process.env.GOOGLE_CLIENT_ID': JSON.stringify(env.GOOGLE_CLIENT_ID),
      'process.env.GITHUB_CLIENT_ID': JSON.stringify(env.GITHUB_CLIENT_ID),
      'process.env.BASE_URL': JSON.stringify(env.BASE_URL),
    },
  };
});

更推荐的方式是使用Vite原生的import.meta.env：

• 将.env中的变量添加VITE_前缀（如VITE_GOOGLE_CLIENT_ID=xxx）
• 代码中直接使用import.meta.env.VITE_GOOGLE_CLIENT_ID
• 移除vite.config.js中的define配置，Vite会自动注入这些变量

3. 移除冗余依赖 #

卸载react-dotenv，避免与Vite的env处理机制冲突：

npm uninstall react-dotenv

验证步骤 #

1. 保存修改后的.env和vite.config.js文件
2. 执行npm install确保依赖更新
3. 运行npm run dev启动项目，确认栈溢出错误消失

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