React项目构建失败：JSON输入意外结束，环境变量读取异常

以下是针对你遇到的问题的排查和解决方案：

1. 检查.env文件的JSON格式合法性 #

这个错误大概率是环境变量中包含的JSON字符串格式有误——开发环境解析容错性较高，但构建时会严格校验：

• 若你将Firebase配置整段作为环境变量（如REACT_APP_FIREBASE_CONFIG='{"apiKey":"xxx",...}'），需确保：
  • 所有键名和字符串值都用双引号（单引号会直接导致JSON解析失败）
  • 键值对末尾无多余逗号（比如"authDomain":"xxx",这种最后一项的逗号必须删除）
  • 整段JSON无语法错误，可通过在线JSON校验工具验证格式
• 更稳妥的方式是拆分Firebase配置为单个环境变量，避免整段JSON的解析风险：

  REACT_APP_FIREBASE_API_KEY=your_api_key
  REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
  REACT_APP_FIREBASE_PROJECT_ID=your_project_id
  

2. 清理项目缓存和依赖 #

缓存的依赖或构建文件可能引发异常：

• 删除node_modules和锁文件，重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 清理React构建缓存，强制重新构建：

  npm run build -- --clean
  

3. 验证环境变量的注入逻辑 #

• 确保代码中所有环境变量都以REACT_APP_为前缀，引用方式正确（如process.env.REACT_APP_FIREBASE_API_KEY）
• 检查firebase.js的初始化代码，确认变量引用无拼写错误：

  import { initializeApp } from "firebase/app";
  import { getAuth } from "firebase/auth";
  
  const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    // 其他配置项
  };
  
  const app = initializeApp(firebaseConfig);
  export const auth = getAuth(app);
  

4. 检查构建环境和脚本 #

• 确认package.json中的build脚本为标准配置：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
  

• 若使用多环境配置（如.env.production），需确保对应环境文件的格式和内容正确，构建时会自动加载对应环境的变量。

5. 预验证环境变量输出 #

在构建前添加脚本，验证环境变量是否能被正确读取：

• Linux/Mac：在package.json中添加prebuild脚本：

  "scripts": {
    "prebuild": "echo $REACT_APP_FIREBASE_API_KEY",
    "build": "react-scripts build"
  }
  

• Windows：

  "scripts": {
    "prebuild": "echo %REACT_APP_FIREBASE_API_KEY%",
    "build": "react-scripts build"
  }
  

运行npm run build时会先打印变量值，若输出为空或格式错误，说明.env文件存在加载或格式问题。

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