Next.js build error "Module not found: Can't resolve 'fs'" (also 'net', 'tls', 'child_process') when importing a module in a client component. How do I fix it?

Cause: Code that runs in the browser cannot use Node.js built-ins such as fs. Webpack 5 no longer supplies automatic polyfills for Node core modules, so when a file marked "use client" (or a page component bundled for the browser, in the Pages Router) imports something that imports fs, the bundler cannot resolve it. The usual culprits are importing server-only helpers (database or file access code) from a client file, or a library that has a Node-only code path. Fix (best first): 1. Move the fs work to the server. In the App Router, do the file or database read in a Server Component, route handler or server action, and pass the result as serializable props to the client component. In the Pages Router, do it in getServerSideProps or getStaticProps; imports used only there are removed from the client bundle. 2. Protect the boundary: add import 'server-only' at the top of modules that must never reach the browser. Importing them from client code then fails at build time with a clear message. 3. If a third-party package uses fs only in a Node-only branch, import it dynamically in server code, or look for its browser build. 4. Only as a last resort for a library you cannot change, tell the client webpack config that fs is intentionally absent: in next.config.js webpack(config, { isServer }) { if (!isServer) { config.resolve.fallback = { ...config.resolve.fallback, fs: false }; } return config; }. This hides the error and the library must not actually call fs in the browser. Verify: rerun the build. The error is gone, and the browser bundle no longer contains the server-only module. Sources: https://nextjs.org/docs/app/getting-started/server-and-client-components https://webpack.js.org/configuration/resolve/