While working on custom sitemap functionality for a Next.js project, I encountered the following error:Module not found: Can't resolve 'fs'. While this is a seemingly clear error, the quest for a solution gained me lots of insights.

Next.js is gaining a lot of popularity. For a good reason, it makes developing server-side rendered applications with React a walk in the park. It boasts impressive features, and it works pretty much out of the box.

My personal website utilizes Next.js. One feature that is missing from Next.js is sitemaps, which is understandable because the formation of it depends heavily on the specific data source and other variables.

I decided it was worth it to invest time creating a sitemap for my website; it would most certainly not hurt the SEO. Implementing the sitemap functionality required jumping through hoops. You can utilize the manifest created by the build process of Next.js. I plan on outlining the details in an upcoming post. I came across a peculiar error during the development: The Module not found: Can't resolve 'fs'.

This error seems straightforward: the filesystem module is not found. Maybe it was not installed or something like that. However, what made this error all the more interesting was that it occurred in the browser. An environment where the filesystem module is not available and most certainly should not be required as a dependency.

Solving the error was a non-trivial task for me at the time, but the process made me better understand how Next.js works under the hood. More specifically, it taught me more about code bundling and splitting. This article explains how to solve the error and highlights the error context, hoping you learn more about Next.js while we are at it.

The error describes a module not being found. What is a module anyway? First, let’s review what modules, code bundling and splitting are all about.

#javascript #react #nextjs