[Solved]-Module not found: Error: Cannot resolve 'file' or 'directory'-Reactjs

in addition to mayank's answer above i would suggest you to use 'babel-root-import' plugin which will help you to import and require with root based path.

eg: from your homepage you can access signuploginform as below:

import signuploginform from '~/container/signuploginform';

for more details refer https://www.npmjs.com/package/babel-root-import

use this:

import signuploginform from '../../container/signuploginform';

since your container folder is two level up from the homepage.jsx file you need to use ../ twice.

meaning of ./, ../ -

./ means the current directory, which means stay in the current folder and search for the file in this.

../ means the parent of the current directory/file, means go to one level up and search for the file.

for example lets say you have two files file1.js and file2.js at these paths, you want to import file2 from file1, imagine your folder structure as tree data structure :

case 1.

file1 -> a/b/c/file1.js

file2 -> a/b/c/file2.js

since files present in the same folder u can directly import it like this : ./file2.js.

case 2.

file1 -> a/b/c/file1.js

file2 -> a/b/c/d/file2.js

in this case file2 present inside d which is at the same level of file1, you can import it like this: ./d/file2.js.

case 3.

file1 -> a/b/c/file1.js

file2 -> a/b/file2.js

in this case file2 present at the parent level of file1, so you need to go one step up by using ../, like this: ../file2.js

case 4.

file1 -> a/b/c/file1.js

file2 -> a/file2.js

in this case file2 present at the level of parent of parent of file1, so you need to go 2 step up by using ../ twice like this: ../../file2.js.

simple rule: ./ means search in the same folder, ../ go one step up directry and search. we can use the combination also like: .././