React Error – module not found: can’t resolve


React throws the error, module not found: can’t resolve, when either the module is not defined or its path is incorrect.

Case 1: When module is not defined

If the module is not defined or it is spelled wrong then React won’t be able to recognize the component and will throw the module not found error. For example, you have created a file Header.js and while importing it in another component, you are using header.js.

Case 2: When module path is incorrect

You should know that by default React uses relative path. So, you can’t use absolute paths in imports. Suppose your directory structure is like this –

  • Folder1
    • SubFolder1
      • File1a
      • File1b
    • File1

You want to import File1b in File1a, then you can use two ways – Relative path or Absolute path.

Correct way – Relative path

import File1b from './File1b'

Wrong way – Absolute path

import File1b from './Folder1/SubFolder1/File1b'

Similarly, if you want to import File1 in File1a then –

Correct way –

import File1 from '../File1'

Wrong way –

import File1 from './Folder1/File1'

But if you are a fan of absolute paths, then there is a way. In your jsconfig.json or tsconfig.json files, add this –

  "compilerOptions": {
    "baseUrl": "."

now you can simply use the absolute paths for importing components.

These tips will help you in solving the issue of module not found React error.

    Tweet this to help others

Sign Up for Our Newsletters

Get only the best articles delivered to your mail

You May Also Like

How to use React?

This article will help you to know how to use React JS in web applications. React js creates static websites with optimized performance and speed. Step 1: Install create-react-app npm…
View Post

.map is not a function

map() can only be used with Arrays. So, if you are getting error .map is not a function, you are probably using it on either the objects or other variables…
View Post