Unable to resolve Imported module

Question

I have the following directory structure in my react-native project.

  project
    |-- src
    |    |-- components 
    |    |    |-- ComponentA
    |    |    |    |-- ComponentA.js
    |    |    |-- ComponentB
    |    |    |    |-- ComponentB.js
    |--App.js
    |--Package.json

In ComponentA.js I am trying to import ComponentB like so:

import ComponentB from '../../ComponentB'

But this gives me an error (500):

Unable to resolve module ../../ComponentB ..

Then I tried:

  import ComponentB from './src/components/ComponentB'

But still the same error.

I also tried:

 import ComponentB from './src/components/ComponentB/ComponentB.js'

But also no solution.

Answer 1

If you are default exporting, then import ComponentB from '../ComponentB/ComponentB' If you just want to use '../ComponentB' you need to name your file inside componentB folder index.js

Because './' is the same level so you are in the same level as ComponentA, and you tried to reach like this: ComponentA/src/.... when you tried '../../' you reached 2 levels higher, so the path was: 'src/ComponentB .

Answer 2

Try this

import ComponentB from '../ComponentB/ComponentB '

This will work because you are trying to access component but you were not reaching to component and when you will use above code then it will go out of your current directory and then again to components directory and then to folder ComponentB and then file name named ComponentB . So now you will be able to access your ComponentB from file ComponentB .