Expo项目读取EAS构建密钥与环境变量返回undefined的排查

问题描述 #

在Sample-Expo-Project项目中，尝试通过process.env读取环境变量，已在EAS中配置Secrets，但无论是本地运行还是构建过程中，process.env.HELLO均返回undefined，多次尝试未解决。

代码与配置详情 #

App.js #

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  console.log(process.env); // 输出 {"NODE_ENV": "development"}
  console.log(process.env.HELLO); // 输出 undefined

  return (
    <View style={styles.container}>
      <Text>From Env {process.env?.HELLO}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Babel配置文件 #

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["transform-inline-environment-variables"],
  };
};

.env文件内容 #

HELLO=HelloEveryone

package.json #

{
  "name": "sample-expo-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~48.0.15",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.7"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "babel-plugin-transform-inline-environment-variables": "^0.4.4"
  },
  "private": true
}

解决方案 #

1. 修复本地运行环境变量加载 #

babel-plugin-transform-inline-environment-variables不会自动读取.env文件，需配合dotenv加载：

• 安装依赖：

  npm install dotenv --save-dev
  

• 修改Babel配置，先加载.env文件：

  require('dotenv').config();
  
  module.exports = function (api) {
    api.cache(true);
    return {
      presets: ["babel-preset-expo"],
      plugins: ["transform-inline-environment-variables"],
    };
  };
  

• 确认.env文件放在项目根目录，未被.gitignore排除（本地运行必须存在）。

2. 修复EAS构建环境变量注入 #

EAS Secrets中的变量需在构建时正确关联：

• 在eas.json中声明要注入的变量，关联EAS配置的Secret名称：

  {
    "build": {
      "production": {
        "env": {
          "HELLO": "@HELLO"
        }
      },
      "development": {
        "env": {
          "HELLO": "@HELLO"
        }
      }
    }
  }
  

  这里@HELLO对应EAS控制台中配置的Secret名称。

3. 官方推荐方案：使用expo-constants #

Expo官方更推荐用expo-constants管理环境变量，步骤如下：

• 安装依赖：

  npx expo install expo-constants
  

• 创建app.config.js加载环境变量：

  require('dotenv').config();
  
  export default {
    expo: {
      name: "sample-expo-app",
      version: "1.0.0",
      extra: {
        hello: process.env.HELLO,
      },
    },
  };
  

• 在App.js中读取变量：

  import { StatusBar } from "expo-status-bar";
  import { StyleSheet, Text, View } from "react-native";
  import Constants from 'expo-constants';
  
  export default function App() {
    const hello = Constants.expoConfig.extra.hello;
    console.log(hello);
  
    return (
      <View style={styles.container}>
        <Text>From Env {hello}</Text>
        <StatusBar style="auto" />
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#fff",
      alignItems: "center",
      justifyContent: "center",
    },
  });
  

4. 验证本地运行 #

修改配置后，清除缓存并重启开发服务器：

npm start --clear

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