React Web项目使用react-native-dotenv报错：无法解析‘@env’

是的，这个错误确实是React（Web）和Expo/React Native的环境差异导致的。

核心原因 #

react-native-dotenv是专门为React Native/Expo生态设计的Babel插件，它依赖React Native的打包流程，通过Babel将@env模块的导入替换为实际的环境变量值。但Web项目的打包工具（比如Webpack、Vite等）默认不识别这个插件的处理逻辑，因此会抛出Can't resolve '@env'的模块找不到错误。

解决方案 #

你需要替换为Web环境兼容的环境变量方案，以下是两种常用实现方式：

方式1：通用Babel项目（dotenv + Babel插件）

1. 安装依赖：

npm install dotenv babel-plugin-transform-inline-environment-variables --save-dev

2. 修改babel.config.js，加载.env文件并替换插件：

require('dotenv').config(); // 加载根目录的.env文件

module.exports = function (api) {
    api.cache(true);
    return {
        plugins: [
            "transform-inline-environment-variables" // 直接替换环境变量
        ],
    };
};

3. 调整代码中的导入逻辑：

// 替换原来的 import { HOSTIP } from "@env";
const HOSTIP = process.env.HOSTIP;

connectFirestoreEmulator(db, HOSTIP, 8080);

4. 更新类型定义文件src/common/types/env.d.ts：

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      HOSTIP: string;
    }
  }
}

export {};

方式2：Create React App项目（内置环境变量支持）

Create React App自带环境变量处理，只需两步：

1. 将.env中的变量前缀改为REACT_APP_，比如REACT_APP_HOSTIP=xxx
2. 直接在代码中使用：

const HOSTIP = process.env.REACT_APP_HOSTIP;

3. 类型定义可沿用方式1的修改，确保TS能识别process.env中的变量。

注意事项 #

• 确保根目录的.env文件存在，变量名无拼写错误
• 如果使用Webpack/Vite等其他打包工具，可选择对应生态的环境变量插件（如dotenv-webpack、vite-plugin-env-compatible），配置逻辑类似

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