Introduction
If you see a “Module not found: error can’t resolve” JavaScript error, there’s likely a problem with the communication between the module you’re trying to find and the client-side, i.e. your browser.
When this happens, there are several steps you can take to allow a module from the server-side to communicate with the browser. Within this article, we’ll outline the reasons you might see a JavaScript: “module not found: error: can’t resolve” issue. From there, we'll go over how to fix this problem.
Why You’re Receiving a Module Not Found Error
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.
It’s in a Different Directory
Yup, it could be as simple as your path leading to an incorrect directory. Check that your path is correct.
Your Cases are Incorrect
As a case-sensitive program, an uppercase where a lowercase letter should be and vice versa can make it impossible to find a module.
You Forgot to Install a Third Party Package
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:
- import * as myModule from '/modules/my-module.js'; // the correct path
Here's what it looks like if you have an incorrect path/directory:
- import * from '/modules/my-moduale.js'; // miss-spelled module
- import * from '/modules/myModule/my-module.js'; // incorrect 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.
It’s a Node.js Specific Module
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.
How to Call a Node.js Specific Module Within React
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:
- ‘getStaticProps’: This function allows you to pre-render a page at build time ahead of the user’s request.
- ‘getStaticPaths’: This function should be used if you add getStaticProps to define a list of paths that should be statically generated.
- Note: You cannot use this function with ‘getServerSideProps’
- ‘getServerSideProps’: Pre-renders a page for each request on the server-side, not via the browser.
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.
Conclusion
Most likely, the reason you’re seeing a “module not found” error message within your JavaScript code will be something simple, like putting an uppercase letter in place or a lowercase letter, or your path is miswritten. Just keep a sharp eye out if you’re attempting to import a node.js module into React.
