Fix the 'module not found' error in Next.js

If Next.js gives you a “module not found” error mentioning a Node.js core module like net, fs or tls, the fix is not to install anything. The fix is to move the code that needs that module to the server side.

In Next.js 16 with the App Router, that means a Server Component or a Route Handler. On Pages Router projects, it means getStaticProps() or getServerSideProps().

While doing some sanitization on a variable in Next.js I ran into this weird problem:

Module not found: Error: Can't resolve 'net'

You might have some variation of it, which says a core Node.js module is missing. fs and child_process are common ones too. If you want a tour of those APIs, I covered them in Node.js core modules.

Why this happens

Next.js compiles your page code twice: once for the server, and once for the browser.

The browser bundle has no access to Node.js core modules. There is no net, no fs, no tls in a browser. So when a library you use in a component that ends up in the browser bundle tries to load one of them, the bundler can’t resolve it, and the build fails with this error.

In other words: Next.js is trying to run backend code in the frontend.

The wrong fix

Do NOT npm install net or anything like that. There happens to be an old, unrelated package on npm with that name, so the install succeeds, but it won’t fix anything. If you already tried, run npm uninstall on those modules.

App Router fix (Next.js 16)

Find the library that needs the Node environment, and call it only from server code. A Server Component (any component in app/ without 'use client' at the top) runs on the server, so it can import it:

import { sanitize } from '@/lib/sanitize' // uses Node APIs

export default async function Page() {
  const description = sanitize(rawDescription)
  return <p>{description}</p>
}

If the work has to happen on demand from the browser, put it in a Route Handler (app/api/sanitize/route.js) and fetch the result from the client. Whatever you do, a 'use client' component must not import the Node-only library, not even indirectly through a shared helper file.

Pages Router fix (legacy)

In my case it was the DOMPurify library. I was using it inside the component, but instead I had to use it in the getStaticProps() method.

That method runs at build time in the Node environment, where that library expected to be ran into.

The nice part is that Next.js strips getStaticProps() (and getServerSideProps()) from the client bundle, along with the imports only used inside it. The library never reaches the browser, so the error goes away.

The component then receives the already-processed data through props:

export async function getStaticProps() {
  const description = sanitize(rawDescription) //runs in Node, at build time
  return { props: { description } }
}

If the work needs to happen per request instead of at build time, use getServerSideProps(). Same idea: the code runs in Node, the browser only gets the result.

One way to spot the culprit: the error output usually shows the import trace, the chain of files leading to the module it can’t resolve. Follow that chain and you’ll find which of your imports pulled in the server-only code.

Want me to talk about your product? You can sponsor this site.