ERROR: Module not found: Can't resolve 'node:fs' in 'D:\Codes\ToDo\todo\node_modules\write-json-file'

Question

I am facing with this error for days: tried anything written on the internet, but still persisting the error--> ./node_modules/write-json-file/index.js Module not found: Can't resolve 'node:fs' in 'D:\Codes\ToDo\todo\node_modules\write-json-file'. Here is my write-json-file/index.js:

import path from 'node:path';
import fs, {promises as fsPromises} from 'node:fs';
import writeFileAtomic from 'write-file-atomic';
import sortKeys from 'sort-keys';
import detectIndent from 'detect-indent';
import isPlainObj from 'is-plain-obj';

const init = (function_, filePath, data, options) => {
    if (!filePath) {
        throw new TypeError('Expected a filepath');
    }

    if (data === undefined) {
        throw new TypeError('Expected data to stringify');
    }

    options = {
        indent: '\t',
        sortKeys: false,
        ...options,
    };

    if (options.sortKeys && isPlainObj(data)) {
        data = sortKeys(data, {
            deep: true,
            compare: typeof options.sortKeys === 'function' ? options.sortKeys : undefined,
        });
    }

    return function_(filePath, data, options);
};

const main = async (filePath, data, options) => {
    let {indent} = options;
    let trailingNewline = '\n';
    try {
        const file = await fsPromises.readFile(filePath, 'utf8');
        if (!file.endsWith('\n')) {
            trailingNewline = '';
        }

        if (options.detectIndent) {
            indent = detectIndent(file).indent;
        }
    } catch (error) {
        if (error.code !== 'ENOENT') {
            throw error;
        }
    }

    const json = JSON.stringify(data, options.replacer, indent);

    return writeFileAtomic(filePath, `${json}${trailingNewline}`, {mode: options.mode, chown: false});
};

const mainSync = (filePath, data, options) => {
    let {indent} = options;
    let trailingNewline = '\n';
    try {
        const file = fs.readFileSync(filePath, 'utf8');
        if (!file.endsWith('\n')) {
            trailingNewline = '';
        }

        if (options.detectIndent) {
            indent = detectIndent(file).indent;
        }
    } catch (error) {
        if (error.code !== 'ENOENT') {
            throw error;
        }
    }

    const json = JSON.stringify(data, options.replacer, indent);

    return writeFileAtomic.sync(filePath, `${json}${trailingNewline}`, {mode: options.mode, chown: false});
};

export async function writeJsonFile(filePath, data, options) {
    await fsPromises.mkdir(path.dirname(filePath), {recursive: true});
    await init(main, filePath, data, options);
}

export function writeJsonFileSync(filePath, data, options) {
    fs.mkdirSync(path.dirname(filePath), {recursive: true});
    init(mainSync, filePath, data, options);
}

And here is the code where I want to use writeJsonFile, because I want to read from a json file and also write to the same file. The reading part is working, but the problem is at writing to file... The app is a simple Todo App in React.

import React, { useState } from 'react';
import TodoForm from './TodoForm';
import Todo from './Todo';
import data from  './data/data.json';
import {writeJsonFile} from 'write-json-file';


function TodoList() {
  const [todos, setTodos] = useState(data); // <-- initial state
  const fs = require('fs');

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

    setTodos((todos) => [todo, ...todos]);
    writeJsonFile('data.json', {id: todo.id, text: todo.text});
  };

  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;

Answer 1

It seems clear your issue comes from:

import fs, {promises as fsPromises} from 'node:fs';

But you are experiencing no issue in your second file with:

const fs = require('fs');

Why don't you use the same line of code for your first file?