CODEWITHSUNDEEP
reactjsgatsby
PaulVO
PaulVO

Reputation: 309

React can't resolve relative path

I'm having an issue with throwing me a Module not found error when specifying a folder, rather than an exact file path.

For example:

src
 - containers
   - Navigation
     - Navigation.js
 - pages
   - index.js


Navigation.js

import React from "react"
import './Navigation.min.css'

class Navigation extends React.Component {
  render(){
    return(
      <div className="navigation">
      </div>
    )
  }
}

export default Navigation;

index.js

import React from "react"
import Navigation from '../containers/Navigation'

export default () => (
  <div>
    <Navigation />
  </div>
)

Attempting to import Navigation throws Module not found: Error: Can't resolve '../containers/Navigation', but when I specify import Navigation from '../containers/Navigation/Navigation.js, it does work.

I can't seem to get it to work without the explicit file name.

Upvotes: 0

Views: 1911

Answers (1)

Ahmed Khattab
Ahmed Khattab

Reputation: 2799

you need to fix your import path

// the correct import path depending on your hierarchy 
import Navigation from '../../containers/Navigation'

" ../" is used to one folder up in the folder tree.

the 

// will not work because your now in the Navigation folder
import "../container/Navigation "

import "../container/Navigation/Navigation" // will work becuase now you are pointing to a file, and you can omit the extenstion

Upvotes: 1

Related Questions