How to Build Fallback for React Webpack: Module not found Error
I was integrating the google-sheets npm package into a React project and was met with the error “Module not found: Error can’t resolve …”. The stack trace informed me I could solve this issue by installing multiple dependencies, but even after doing so I still got this error. To fix this you need to include the dependencies and the fallbacks to not get the module not found error.
The Main Part of Our Error
Before we can solve this issue, we need to understand a few items in the stack trace. The first and most important part of the error message is this line:
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.This line gives us all the context we need to solve this issue, but raises questions like what is webpack, what are polyfills, and what is a breaking change? Let us start with what is webpack.
What is Webpack?
An important design consideration for UI / UX is speed. Users don’t want to wait for a page’s structure or assets to load. Any method that reduces the first contentful render, decreases network traffic and improves UX must be considered. To help with this we have webpack.
Webpack is a module bundler that takes JavaScript modules, CSS styles, HTML code, and other assets and bundles it to optimize how it is transferred from the server to the requesting client. It creates a dependency graph that helps optimize how these assets and code are combined when sending to a client.
Here we see how multiple .js, .css, and .png files are compiled into just a few items to be shared with a client. This is a popular tool with front-end frameworks like React because it helps organize code in a way that makes SPA lighting fast.
What is the Breaking Change?
To understand breaking changes we need to understand software versioning. Software is bits and bytes, ones and zeros. Past these atomic units, software is a living entity. Developers change the software code. They add new features and update existing features. They react to the changing and updating of dependencies to ensure a smooth experience for end users.
However, not every change is safe, which is why software has a method for versioning. No, we don’t just name things my-package 1, my-package 2, etc. Instead, we use the following 3-number format:
Read left to right, the first number is the major version. This number is incremented whenever major software changes are made that are guaranteed to break programs that rely on it. That is why it is called a breaking change. Changes could include different names for resources or methods or a different structure for an API that will cause existing programs to be unable to locate data.
The middle number is a minor version change. This may introduce new features, but should not affect existing features within the software. The final number is the patch version change and refers to bug fixes that don’t extend functionality, but only fix broken code.
From the error message, we see that we are getting a breaking change on all major versions of Webpack greater than 5.
What is a polyfill?
Software is not static, and every version of a program or even tool used to access it can lead to some unexpected effects. Web developers know this issue with browser problems that occur when using HTML5 and CSS3 code. This is why websites like caniuse.com are such popular tools.
ECMAScript versions act just like HTML5 and CSS3 in that new versions add features that don’t won’t work with older versions of JavaScript. New versions of ECMAScript offer built-in methods and structures that make development easier for developers but also lead to broken code if the client does not support the code. This is where polyfills help.
A polyfill is a piece of code that implements the functionality of a feature in a web browser that does not support the feature. They allow developers to use the newest web features while ensuring that the programs work on older browsers.
With the error we are seeing, we can add a dependency fallback. When our code looks for the built-in node.js modules that have been excluded from webpack 5, instead of failing, it will look for a substitute package that we provide and use that instead.
How Can We Fix our Module not Found Error with NPM and Polyfills?
We have discussed what webpack is, how software versioning works, and what a polyfill is. Now we are ready to fix our module not found error. Browser JavaScript and server JavaScript have different packages they can use, so we may have to download the packages necessary to solve our missing module error.
There are two issues to be solved with this error:
- The required npm package is not included in the project
- We need to use a client-friendly package and map the node package to a web package
In our error message, we get all the information we need. The first step is we need to include the missing package. Let us take for example the path package. This is a standard node package but is not client-friendly. Our React app needs an equivalent: the path-browserify package.
We can npm install path-browserify, but this only solves the first step. To get our app to work, we must tell webpack to look for path-browserify, not path. We can navigate to the webpack.config.js file:
/node_modules/react_scripts/config/webpack.config.js This file handles our webpack setup whenever we start our local server with a react script command like npm start dev. We want to map calls to the old dependency, path, to our new dependency path-browserify. We are using a fallback, or catch statement with this mapping so we need to specify this.
If we search in the file for “fallback: {“ we will find a hash that allows us to put many fallback mappings for our modules. Copy the code from your error statement into the has like this:
You may need to restart your server, but once you have installed the dependency and added the fallback path the error should be cleared!
