Create React App使用dotenv存储API Key时遇模块缺失错误求助

开发者阿泽

2026-8-20

解决Create React App中使用.env文件的编译错误

错误原因

你手动引入了Node.js环境的dotenv包，但Create React App(CRA)已经内置了.env文件的支持，无需额外安装和调用dotenv。dotenv依赖Node.js核心模块（fs/path/os），这些模块在浏览器环境中不存在，因此编译报错。

修复步骤

1. 移除不必要的dotenv引用

删除代码中的这一行：

require('dotenv').config

2. 修正.env文件格式

.env文件中变量不要加引号，且等号两边避免空格（规范写法）：

REACT_APP_KEY=1234ABC

注：CRA只会识别以REACT_APP_开头的环境变量，这是强制要求。

3. 调整模块引入方式（可选但推荐）

React项目更推荐使用ES模块语法替换CommonJS的require：

import request from 'superagent'
const url = 'https://wordsapiv1.p.mashape.com/words/'

export function getDictionaryDefinition() {
  return request
    .get(`${url}dog`)
    .set('X-Mashape-Key', process.env.REACT_APP_KEY)
    .then((response) => {
      console.log(response)
    })
}