React应用中npm 'fs'同步读文件的替代包求助

首先得明确一个关键前提：React运行的环境决定了可用的文件读取方式——因为fs是Node.js的核心模块，只能在Node.js环境（比如后端代码、Next.js的服务端路由/SSR、Electron的主进程等）中使用，而浏览器环境下出于安全限制，JavaScript无法直接访问本地文件系统，必须依赖用户主动选择文件的交互。

场景1：React运行在Node.js环境（如Next.js服务端、Electron主进程等） #

你提到的fs其实是Node.js内置的核心模块，根本不需要通过npm安装！之前的误解可能是把它当成了第三方包，实际上直接导入就能用：

// 同步读取文件的示例代码
import fs from 'fs';
import path from 'path';

try {
  // 拼接正确的文件路径（process.cwd()代表当前项目根目录）
  const filePath = path.join(process.cwd(), 'example.txt');
  // 同步读取文件，第二个参数指定编码格式
  const content = fs.readFileSync(filePath, 'utf8');
  console.log('文件内容:', content);
} catch (err) {
  console.error('读取文件失败:', err);
}

这里fs.readFileSync()就是Node.js原生的同步文件读取方法，完全不需要依赖任何第三方包，也不存在被npm移除的情况。

场景2：React运行在浏览器环境（前端页面） #

浏览器出于安全和性能考虑，没有原生的同步本地文件读取API（强制同步会阻塞主线程，导致页面卡顿），但可以通过用户交互（比如<input type="file">）获取文件后，用FileReader结合Promise封装成类似同步的写法（本质还是异步，但用async/await让代码逻辑看起来更像同步）：

import { useState } from 'react';

function FileReaderComponent() {
  const [fileContent, setFileContent] = useState('');

  const handleFileSelect = async (e) => {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;

    // 把FileReader封装成Promise，方便用async/await
    const readFileAsync = (file) => {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
        reader.readAsText(file);
      });
    };

    try {
      // 这里的代码逻辑看起来和同步读取一致
      const content = await readFileAsync(selectedFile);
      setFileContent(content);
    } catch (err) {
      console.error('读取文件失败:', err);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileSelect} />
      <div className="file-content">{fileContent}</div>
    </div>
  );
}

export default FileReaderComponent;

注意：这种方式必须依赖用户主动选择文件，无法在无用户交互的情况下直接读取本地文件，这是浏览器的安全机制限制，任何第三方包都无法绕过。

关于第三方包的说明 #

你之前尝试的read-file这类依赖fs的包，本质都是为Node.js环境设计的，没法在浏览器里用。在Node.js环境下直接用原生的fs模块就够了，完全不需要额外装第三方包；在浏览器环境下则只能通过上述用户交互+FileReader的方式实现文件读取。

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