react-native-dotenv报@env/fs模块无法解析错误如何解决

核心根因：安装的react-native-dotenv@^3.1.1和Expo SDK 42完全不兼容。3.x版本重构后错误引入Node原生fs模块，Metro客户端打包环境无法识别Node原生依赖，同时3.x版本的Babel插件注册逻辑和SDK 42内置的Babel加载规则冲突，才会先后触发@env模块无法解析、fs模块不存在的报错。

步骤1：替换为兼容版本依赖 #

先卸载不兼容的3.x版本，安装适配Expo SDK 42的稳定版：

npm uninstall react-native-dotenv
npm install react-native-dotenv@2.5.0 --save-dev

版本适配说明：3.0.0及以上版本仅支持Expo SDK 45+，低版本Expo强行安装3.x版本必然触发fs模块缺失报错，无其他polyfill方案可以解决。

步骤2：修正Babel配置文件 #

Expo SDK 42的Babel加载逻辑不支持.ts后缀的配置文件，使用的babel.config.ts不会被识别，直接导致插件配置不生效。将其重命名为babel.config.js，替换为如下内容：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env',
          allowUndefined: true
        }
      ]
    ]
  };
};

步骤3：修正类型声明配置 #

将放在type/env.d.ts的模块声明文件，移动到项目根目录新建的types文件夹下，确保tsconfig.json的include字段覆盖了该目录，声明文件内容保持如下即可：

declare module '@env' {
  export const API_KEY: string;
}

步骤4：全量清缓存重启服务 #

Metro和Expo的缓存会长期留存旧的模块解析逻辑，配置修改后必须执行全量清缓存操作，否则会持续触发旧报错：

# 删除缓存目录
rm -rf node_modules/.cache .expo .metro
# 带清缓存参数启动打包服务
expo start -c --android

避坑提示 #

• 所有环境变量必须从配置的@env模块导入，不要直接从react-native-dotenv主包导入，否则会触发Node端依赖解析错误
• 每次修改Babel配置、环境变量文件后，都要加-c参数重启Expo服务，否则配置不会生效
• 不要随意升级SDK 42项目内的Babel相关依赖到7.16以上版本，会和内置的babel-preset-expo产生版本冲突

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