React项目使用write-json-file报Can't resolve 'node:fs'错误求助

报错根本原因 #

你使用的write-json-file是Node.js端专用的依赖包，底层依赖Node.js内置的fs文件系统模块。而你开发的React应用默认运行在浏览器沙箱环境中，浏览器出于安全限制不允许前端代码直接操作用户本地文件系统，也不存在node:fs这类Node.js专属模块，因此编译阶段直接抛出找不到模块的错误。
你之前可以正常导入读取data.json，是因为webpack等构建工具在打包阶段就把静态json文件的内容编译进了前端代码，并非运行时读取本地文件，和写入操作的逻辑完全不同。另外你代码里的const fs = require('fs');也是无效代码，浏览器不支持该调用，可以直接删除。

可行解决方案 #

根据你的需求可以任选以下一种方案实现数据持久化：

方案1：使用浏览器本地存储（最简单，适合纯前端小项目） #

不用操作本地文件，直接用浏览器自带的localStorage存储待办数据，改造后代码如下：

import React, { useState, useEffect } from 'react';
import TodoForm from './TodoForm';
import Todo from './Todo';
import initData from  './data/data.json';

function TodoList() {
  // 初始化优先读取localStorage存储的内容，不存在则用导入的初始数据
  const [todos, setTodos] = useState(() => {
    const savedTodos = localStorage.getItem('todos');
    return savedTodos ? JSON.parse(savedTodos) : initData;
  });

  // 监听todos变化，每次更新自动同步到localStorage
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  const addTodo = (todo) => {
    if (!todo.text || /^\s*$/.test(todo.text)) {
      return;
    }
    setTodos((todos) => [todo, ...todos]);
  };

  const updateTodo = (id, newTodo) => {
    if (!newTodo.text || /^\s*$/.test(newTodo.text)) {
      return;
    }
    setTodos((todos) => todos.map((todo) => (todo.id === id ? newTodo : todo)));
  };

  const removeTodo = (id) => {
    setTodos((todos) => todos.filter((todo) => todo.id !== id));
  };

  const completeTodo = (id) => {
    setTodos((todos) =>
      todos.map((todo) =>
        todo.id === id
          ? {
              ...todo,
              isComplete: !todo.isComplete
            }
          : todo
      )
    );
  };

  return (
    <>
      <TodoForm onSubmit={addTodo} />
      <Todo
        todos={todos}
        completeTodo={completeTodo}
        removeTodo={removeTodo}
        updateTodo={updateTodo}
      />
    </>
  );
}

export default TodoList;

该方案不需要额外安装任何依赖，数据存储在用户本地浏览器中，刷新页面不会丢失。

方案2：导出json文件到本地（需要用户手动触发） #

如果你确实需要把待办数据保存为本地json文件，可以用浏览器自带的下载API实现，不需要调用Node.js相关的文件操作包：

// 新增导出函数，可绑定到页面的导出按钮点击事件
const exportToJson = () => {
  const jsonContent = JSON.stringify(todos, null, 2);
  const blob = new Blob([jsonContent], { type: 'application/json' });
  const downloadUrl = URL.createObjectURL(blob);
  const aTag = document.createElement('a');
  aTag.href = downloadUrl;
  aTag.download = 'todos.json';
  aTag.click();
  URL.revokeObjectURL(downloadUrl);
};

用户点击导出按钮后，浏览器会自动把最新的待办数据下载为json文件到本地。

方案3：修改项目内的data.json文件（需要搭配后端服务） #

如果你的需求是直接修改项目源码目录下的data/data.json文件，必须额外新增后端服务层，比如用Node.js写简单的操作文件的接口，React前端发请求给后端，由后端调用fs模块操作本地文件，前端代码不能直接修改项目目录内的文件。

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