添加react-native-config后构建时报错：无法在模块外使用import语句

问题原因 #

app.config.ts是在Node.js环境中执行的（Expo/Xcode构建阶段），而react-native-config的核心依赖React Native的NativeModules——这在Node环境中不存在；同时Node默认使用CommonJS模块系统，直接在app.config.ts中import react-native-config会触发模块语法错误。

方案一：修复react-native-config的构建阶段使用 #

通过dotenv在构建阶段直接读取.env文件，运行时依然使用react-native-config：

1. 安装dotenv开发依赖

yarn add dotenv --dev

2. 在app.config.ts中配置dotenv

// 加载对应环境的.env文件，自动匹配NODE_ENV，默认用development
require('dotenv').config({ path: `.env.${process.env.NODE_ENV || 'development'}` });

export default {
  name: 'YourAppName',
  slug: 'your-app-slug',
  // 构建阶段需要的配置直接用process.env读取
  extra: {
    apiUrl: process.env.API_URL,
  },
  // 其他项目配置...
};

3. 运行时继续使用react-native-config

import Config from 'react-native-config';

console.log(Config.API_URL); // 运行时正常访问环境变量

方案二：使用Expo官方环境变量机制（推荐） #

Expo内置了对.env文件的支持，无需额外依赖第三方库：

1. 项目根目录创建环境文件
   创建.env、.env.development、.env.production，示例：

# .env.development
API_URL=https://dev-api.example.com
NODE_ENV=development

2. 配置app.config.ts

import { ExpoConfig } from '@expo/config';

const config: ExpoConfig = {
  name: 'YourAppName',
  slug: 'your-app-slug',
  extra: {
    apiUrl: process.env.API_URL,
    env: process.env.NODE_ENV || 'development',
  },
  // 其他Expo配置...
};

export default config;

3. 运行时访问环境变量

import Constants from 'expo-constants';

console.log(Constants.expoConfig.extra.apiUrl); // 直接从Expo常量中获取

这种方式完全适配Expo的构建流程，避免了第三方库带来的Node环境兼容性问题。

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