Next.js middleware Module not found: Can't resolve 'fs'

Matthew C.

—March 15, 2024

The ProblemJump To Solution

You are using the Node.js file system (fs) module in a Next.js middleware function. For example, you have a src/app/middleware.js file that should add a time stamp to the data.txt file when routes that start with "/example-route" are accessed:

import fs from "fs";

export function middleware(request) {
  if (request.nextUrl.pathname.startsWith("/example-route")) {
    fs.writeFile("src/data.txt", `Last accessed: ${Date.now()}`, (err) => {
      if (err) {
        console.error(err);
      } else {
        // file written successfully
      }
    });
  }
}

This middleware function runs before a request to routes is completed.

If you run this code and access an existing "/example-route" route, you’ll get an error:

The edge runtime does not support Node.js 'fs' module.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime

Next.js middleware only supports the Edge Runtime currently. The Next.js Edge Runtime is based on standard Web APIs, it does not support native Node.js APIs like the file system API. You can see a list of available APIs in the Vercel Edge Runtime API docs.

The Solution

To use the Node.js file system module, you’ll need to use the Node.js runtime, which means you won’t be able to access it in a middleware function.

You can instead use the Node.js file system module in a Server Component, Route Handler, or Server Action.

For example, you could access the Node.js file system module from a page in the src/app/example-route directory. Pages are Server Components by default from Next.js 13 onwards.

import fs from "fs";

export default function ExampleComponent() {
  fs.writeFile("src/data.txt", `Last accessed: ${Date.now()}`, (err) => {
    if (err) {
      console.error(err);
    } else {
      // file written successfully
    }
  });

  return (
    <main>
      <div>text</div>
    </main>
  );
}

You can reuse the write to file logic by using a Server Action or a Route Handler (equivalent to a Next.js API route). For example, you can create a Server Action in a separate file that you can then import into your components:

"use server";

import fs from "fs";

export async function timeStamp() {
  fs.writeFile("src/data.txt", `Last accessed: ${Date.now()}`, (err) => {
    if (err) {
      console.error(err);
    } else {
      // file written successfully
    }
  });
}

Server Actions are asynchronous functions that are only executed on the server. You define a Server Action using the "use server" directive. You can add the directive at the top of a file to mark all exports as server functions, or you can add it inline at the top of an async function to mark a specific function as a Server Action. Server Actions can also be used in Client Components.