Remix JS应用中创建文件夹与文件失败，如何修复？

你的代码在Remix外能跑但在项目里不行，核心是两个问题：

1. Remix是全栈框架，代码可能跑到浏览器环境了——fs是Node.js专属模块，浏览器根本没有这个API
2. Remix服务器环境的相对路径基准和你本地直接跑脚本不一样，路径指向错误

具体解决步骤 #

1. 把代码移到服务器端执行

Remix里只有Loader/Action函数、服务器端路由文件的代码才会在Node.js环境跑，客户端组件（带"use client"指令的）绝对不能碰fs。

比如新建一个服务器路由routes/api/create-folder.jsx：

import { json } from "@remix-run/node";
import fs from 'fs/promises';
import path from 'path';

export async function loader() {
  try {
    // 用process.cwd()拿项目根目录，彻底解决相对路径问题
    const rootDir = process.cwd();
    const newFolderPath = path.join(rootDir, 'newFolder');
    const newFilePath = path.join(newFolderPath, 'newFile.txt');

    // 加recursive: true，避免文件夹已存在时报错，还能创建嵌套文件夹
    await fs.mkdir(newFolderPath, { recursive: true });
    await fs.writeFile(newFilePath, 'Hello, World!', 'utf8');

    return json({ success: true, msg: '文件夹和文件创建成功' });
  } catch (err) {
    console.error('创建失败:', err);
    return json({ success: false, errMsg: err.message }, { status: 500 });
  }
}

启动项目后访问/api/create-folder，就能触发服务器端的文件创建逻辑。

2. 替换CommonJS导入为ES模块

Remix默认推荐用ES模块（import/export），别再用require了，直接用fs/promises版本更简洁。

3. 绝对不要在客户端组件里用fs

如果你的代码原来写在带"use client"的组件里，直接删掉——浏览器环境不可能支持文件系统操作，所有这类逻辑必须丢去服务器端。

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