Sentry Answers>Next.js>

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

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

Matthew C.

The Problem

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:

Click to Copy
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:

Click to Copy
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.

Click to Copy
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:

Click to Copy
"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.

  • Sentry BlogCommon Errors in Next.js and How to Resolve Them
  • Community SeriesDebug Next.js with Sentry
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark of Functional Software, Inc.