This error comes from package bundlers, such as rollup or webpack. When building your application and bundling it for the web, these bundlers find all the necessary pieces of code in your project and convert them to something readable by the browser. If there is a package/module a piece of your code needs and the bundler cannot find it, it can't complete your bundle.
There are several reasons why the client-side may not be able to locate the module you’re trying to call. Usually this is an import error where you’re trying to get ahold of a module that doesn’t exist or is in the wrong place.
Here are a few reasons why you’re seeing this error.
Yup, it could be as simple as your path leading to an incorrect directory. Check that your path is correct.
As a case-sensitive program, an uppercase where a lowercase letter should be and vice versa can make it impossible to find a module.
Perhaps you’re trying to call a third party package that doesn’t exist. If your error message says something like, “Module not found: Can’t resolve ‘third party package’”, then you should download the package it recommends.
Example of a “module not found” error messages will be dependent on the framework and/or build tool that you are using.
But here’s an example of how this might look like in action:
Let’s say you have a module that you’re trying to import, like “myModule.”
This is what is should look like:
Here's what it looks like if you have an incorrect path/directory:
If none of the above examples prove to be the issue, check your package.json for your dependencies to ensure the package has been installed correctly.
Sometimes, node.js and React don’t always play well together. Part of the reason for this is that certain types of modules only run in node.js. If you’re attempting to call a node.js module in React, you’ll need to take additional steps.
Certain modulus are only able to run in node.js environments. As you can imagine, attempting to call a module that only works within node.js into React might lead to some issues. Fortunately, there’s a workaround.
The following will allow you to fetch data that will help you run a node.js module in a React environment:
By including these functions into your code, you’ll be able to run direct database queries in React.
Ensure that modules have been imported correctly by tree shaking. Tree shaking allows you to automatically remove dead code when bundling multiple files into one. If you’re not familiar with how tree shaking works, check out this tree shaking tutorial.