React项目使用fs模块readdir报ENOENT无此文件或目录错误如何解决

问题根因分析 #

• 如果这段代码是写在**前端React组件（浏览器端运行）**里的：浏览器环境本身不支持Node.js的fs原生模块，也没有本地文件系统的直接读写权限，所有fs相关调用都会失效，路径匹配规则也和Node.js环境完全不同。
• 如果这段代码是写在**Node.js环境（比如Next.js服务端组件、自定义脚本、Electron主进程）**里的：报错是因为相对路径./src/videos的参照基准是你执行启动命令的工作目录，不是当前代码文件的存放目录，所以会出现路径匹配偏差找不到文件夹。

对应解决方案 #

场景1：代码在浏览器端运行 #

不能直接用fs读取本地项目文件，可选择两种替代方案：

• 把videos文件夹放到React项目的public目录下，直接通过资源URL访问单文件，比如/videos/xxx.mp4；如果要获取所有视频列表，可以在打包阶段编写Node脚本生成一份视频列表的JSON文件，前端直接请求这个JSON拿到所有文件名。
• 如果是本地客户端类的React项目，改用Electron框架，把fs相关逻辑放在Electron主进程执行，通过IPC和渲染层通信拿到文件列表。

场景2：代码在Node.js环境运行 #

改用绝对路径读取，用__dirname或者process.cwd()拼出准确的目录路径，示例代码如下：

const path = require('path');
// 以当前代码文件的位置为基准匹配videos目录，相对层级根据你当前代码文件和src的位置调整
const videosPath = path.resolve(__dirname, '../src/videos');
fs.readdir(videosPath, (err, files) => {
  if (err) {
    console.log(err);
    // 打印拼接后的路径可快速排查路径匹配问题
    console.log('当前查找路径：', videosPath);
  } else {
    console.log(files);
    files.forEach(file => console.log(file))
  }
})

如果是Next.js App Router的服务端组件，可通过process.cwd()获取项目根目录再拼接路径：

import path from 'path';
import fs from 'fs/promises';

const getVideos = async () => {
  const videosDir = path.join(process.cwd(), 'src', 'videos');
  const files = await fs.readdir(videosDir);
  return files;
}

内容的提问来源于stack exchange，提问作者Tolga Günaydın