Module not found: Can’t resolve ‘#’ In React – How To Fix It?

Posted on by Christopher
Module not found: can’t resolve ‘#’ error in react

There are many reasons why the “Module not found: can’t resolve ‘#'” error in React occurs. Let’s see what those cases are and how to solve them.

When does the error occur?

The error may arise when you import a file with the incorrect path, or you use the third-party packages but forgot to install them.

Take a look at an example of the error:

src/
  components/
    Home.js
    nav/
       Menu.js
  App.js
// Incorrect path for Home component
import Home from './Home.js';  
// If you don't have the installed upper-case package, this import command will throw an error
import { upperCase, localeUpperCase } from 'upper-case';

Output:

How to fix the “Module not found: can’t resolve ‘#'” error in React?

Method 1: Install packages before using them

You most likely forgot or misremembered about installing third-party packages and started importing them for use in your project.

Let me give you a specific example:

"Module not found: Can't resolve 'reactdom'

In this case, the error message is telling you that no module named ‘reactdom‘ was found in your project, so the import statement will not be able to execute.

To fix this problem, all you need to do is install the module that appears in the error message with the following command:

npm install <module_name>

If you want to install them globally, you can use -g flag:

npm install -g <module_name>

After successfully installing the necessary packages with the above command, you can use them normally.                                    

If the error persists, try to delete the node_modules folder and the package-lock.json file. Then run the command: npm install.

rm -rf node_modules
rm -f package-lock.json
npm install

Please restart the IDE after executing these commands.

Method 2: Use the exact path of the local files

You may get an error when you want to import a self-defined module. Please pay attention to the file path. If you use an incorrect path, you will surely get the same error as above because the program cannot find any module that matches your provided path.

Let’s take a look at this example: 

Suppose this is your project folder structure.

src/
  components/
    Home.js
    nav/
       Menu.js
  App.js

In App.js, import Home and Menu components:

import { Home } from './components/Home';
import { Menu } from './components/Menu';

Output:

"Module not found: Can't resolve './components/Menu'

Let me explain this error message. As you can see, the error here is that no module can be imported from path ‘./components/Menu‘. The reason is that there is no such path in your project. 

Looking at the folder structure, you can see that the location of Home.js and Menu.js compared to App.js is different. So to import them into the App.js file, we cannot use the same file path.

The import statement above should be corrected as follows:

import { Home } from './components/Home';
import { Menu } from './components/nav/Menu';

This is just a small example to help you visualize where the error occurs. When working with a large project, a complex directory structure, wrong declaration of the directory path is very likely to happen.

A tip for you: Type a few characters then the IDE can help you autofill the path. If you find that it does not automatically find a particular address you are looking for, it is likely that the link is wrong, and you should check again.

Summary

Thank you for reading the entire article. Hopefully, the methods provided in this post will help you fix the “Module not found: can’t resolve ‘#'” error in React.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *