Vite+React项目引入node-fetch出现import_node_fs.promises未定义错误

核心问题 #

node-fetch@3.x 是专为 Node.js 环境开发的 HTTP 请求库，它依赖 Node.js 内置模块（比如fs），而浏览器环境中不存在这些模块，直接在 Vite+React 前端项目中引入就会触发fs.promises未定义的错误。

解决步骤 #

1. 改用浏览器原生fetch（推荐） #

Chrome、Edge 等现代浏览器已内置标准的fetch API，完全不需要额外安装node-fetch：

• 移除package.json中的"node-fetch": "^3.3.1"，执行命令 npm uninstall node-fetch
• 删除代码中的import fetch from 'node-fetch';语句
• 补全请求 URL 的协议（必须加http://或https://，否则浏览器会把localhost:8080识别为相对路径），保留原请求逻辑：

const onSubmit = async () => {
  const x = await fetch('http://localhost:8080');
}

2. 若需跨环境兼容（可选） #

如果代码需要同时在 Node.js 和浏览器环境运行，或要兼容老旧浏览器，可以用适配双环境的库：

• 安装cross-fetch：npm install cross-fetch
• 导入并使用：

import fetch from 'cross-fetch';

const onSubmit = async () => {
  const x = await fetch('http://localhost:8080');
}

3. 检查配置文件（补充） #

确保vite.config.js没有错误配置（比如意外开启ssr或其他 Node.js 专属配置），导致 Node.js 模块被引入浏览器环境。常规的 Vite+React 配置无需额外处理此问题。

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