How one tiny error lead me to learn a great deal about frontend development
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.
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.