Реакт не может разрешить относительный путь

Question

У меня проблема с выдачей мне ошибки Module not found при указании папки, а не точного пути к файлу.

Например:

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>
)

Попытка импортировать Navigation выдает Module not found: Error: Can't resolve '../containers/Navigation', но когда я указываю import Navigation from '../containers/Navigation/Navigation.js, он работает.

Кажется, я не могу заставить его работать без явного имени файла.

Answer 1

вам нужно исправить путь импорта

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

"../" используется для одной папки вверх в дереве папок.

// 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