React项目使用.env文件后process.env未定义的问题求助

在React项目中使用.env文件后出现process.env未定义错误，尝试了react-scripts 5.0.1、react-error-overlay ^6.0.11，以及配置preinstall脚本npx npm-force-resolutions等方案，问题仍未解决。代码中通过<GoogleOAuthProvider clientId={process.env.GOOGLE_OAUTH_CLIENT_ID}>进行OAuth配置。

项目package.json内容 #

{
  "name": "hidden",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.11.14",
    "@react-oauth/google": "^0.9.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "axios": "^1.3.4",
    "date-and-time": "^2.4.3",
    "normalize.css": "^8.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-particles": "^2.9.3",
    "react-scripts": "5.0.1",
    "react-toastify": "^9.1.2",
    "tsparticles": "^2.9.3",
    "web-vitals": "^3.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}",
    "lint:fix": "eslint --fix src/**/*.{js,jsx,ts,tsx,json}",
    "prettify": "prettier --write src/**/*.{js,jsx,ts,tsx,css,md,json,scss} --config ./.prettierrc",
    "preinstall": "npx npm-force-resolutions"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^8.36.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-react": "^7.32.2",
    "prettier": "2.8.7",
    "react-error-overlay": "^6.0.11"
  }
}

错误截图 #

项目文件夹结构 #

排查与解决建议 #

• 检查.env文件规则：必须放在项目根目录（与package.json同级），变量名必须以REACT_APP_开头，比如REACT_APP_GOOGLE_OAUTH_CLIENT_ID，React仅会自动注入带该前缀的环境变量。
• 重启开发服务器：修改.env文件后必须停止当前npm start进程，重新启动，否则新变量不会被加载。
• 规范.env文件语法：变量定义不要加多余引号，正确格式为REACT_APP_GOOGLE_OAUTH_CLIENT_ID=your_client_id，若值包含特殊字符再考虑引号。
• 重新安装依赖：删除node_modules和package-lock.json，执行npm install，确保依赖完整无损坏。
• 验证变量注入：在组件中添加console.log(process.env)，查看控制台输出是否包含定义的变量，排除代码引用错误。
• 检查自定义配置：若执行过eject或自定义了webpack配置，需确认DefinePlugin是否正确配置了process.env相关变量。

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