React Native环境变量失效问题（NextJS+Monorepo架构）

我开发的项目基于 React Native Web + NextJS，采用 Monorepo 架构，所有服务共用根目录下的单个 .env 文件。目前 NextJS 侧的环境变量可以正常读取，但 React Native 端的环境变量始终不生效。

我已完成的配置：

• React Native 端通过 app.config.js 读取 .env 文件中的变量，再借助 expo-constants 引入使用
• NextJS 侧通过 next.config.js 配置环境变量，且能正常工作

以下是使用环境变量的代码：

import { FirebaseApp, FirebaseOptions, initializeApp } from "firebase/app";
import { Auth, getAuth } from "firebase/auth";
import { Platform } from "react-native";
import Constants from "expo-constants";

const isWeb = Platform.OS === "web";

const { FIREBASE_PUBLIC_API } =
  Constants.manifest?.extra?.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY;
console.log(FIREBASE_PUBLIC_API);

const firebaseCredentials: FirebaseOptions = {
  appId: isWeb ? process.env.NEXT_PUBLIC_FIREBASE_APP_ID : FIREBASE_PUBLIC_API,
  apiKey: isWeb
    ? process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY
    : Constants.manifest?.extra?.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
  authDomain: isWeb
    ? process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
    : Constants.manifest?.extra?.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: isWeb
    ? process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID
    : Constants.manifest?.extra?.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};

let app: FirebaseApp | null = null;
let auth: Auth | null = null;

const initFirebase = () => {
  if (!app) {
    app = initializeApp(firebaseCredentials);
    auth = getAuth();
  }

  return app;
};

我的 app.config.js 配置如下：

export default {
  name: "CoolApp",
  version: "1.0.0",
  extra: {
    HASURA_GRAPHQL_ADMIN_SECRET: process.env.HASURA_GRAPHQL_ADMIN_SECRET,
    HASURA_GRAPHQL_API_URL: process.env.HASURA_GRAPHQL_API_URL,
    HASURA_GRAPHQL_CORS_DOMAIN: process.env.HASURA_GRAPHQL_CORS_DOMAIN,
    NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY:
      process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
    NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN:
      process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    NEXT_PUBLIC_FIREBASE_PROJECT_ID:
      process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET:
      process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID,
    NEXT_PUBLIC_FIREBASE_APP_ID: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    FIREBASE_MEASUREMENT_ID: process.env.FIREBASE_MEASUREMENT_ID,
    NEXT_PUBLIC_LOGROCKET_ID: process.env.NEXT_PUBLIC_LOGROCKET_ID,
    NEXT_PUBLIC_MAPBOX_TOKEN: process.env.NEXT_PUBLIC_MAPBOX_TOKEN,
    NEXT_PUBLIC_MAPBOX_STYLE: process.env.NEXT_PUBLIC_MAPBOX_STYLE,
  },
};

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