[解決済み] React.jsのモジュールを解決できない(見つからない)

質問

当たり前のことを聞いているのに、コンソールログにエラーが表示されるのは信じられません。

コンソールは、ディレクトリにモジュールが見つからないと言いますが、タイプミスがないか10回以上チェックしました。とにかく、これがコンポーネントコードです。

レンダリングしたい ヘッダー ルートで

import React, { Component } from 'react'
import Header from './src/components/header/header'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  render() {
    return (
      <Header/>
    );
  }
}

export default App;

これは Header コンポーネント

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import navBar from './src/components/header/navBar'
import './src/css/header.css'

class Header extends Component {
    render() {
        return {
            <div>
             <div id="particles-js"></div>
             <navBar/>
             <Title/>
          </div>
        };
    }
}

ReactDOM.render(<Header/>, document.getElementById('header'));

少なくとも10回はモジュールがこの場所にあることを確認しました。 ./src/components/header/header フォルダ "header"には "header.js" が含まれています）。

それでも、Reactはこのエラーを投げる。

コンパイルに失敗しました

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

npmテスト は同じことを言う。

解決方法は？

通常、私たちが使用する方法は import は相対パスに基づいています。

. と .. でのナビゲーションに似ています。 terminal のように cd .. でディレクトリ外に出て mv ~/file . を移動させることができます。 file をカレントディレクトリに移動します。

my-app/
  node_modules/
  package.json
  src/
    containers/card.js
    components/header.js
    App.js
    index.js

あなたの場合 App.js は src/ ディレクトリを作成する一方 header.js が src/components . への import を実行します。 import Header from './components/header' . これは大雑把に言うと、私のカレントディレクトリで、ヘッダーファイルを含むコンポーネントフォルダを探すということです。

さて、もし header.js にする必要があります。 import から何か card の場合、こうなります。 import Card from '../containers/card' . これは、カレントディレクトリから移動し、カードファイルを持っているフォルダ名のコンテナを探すという意味になります。

については import React, { Component } from 'react' で始まらない。 ./ または ../ または / でモジュールを探し始めるので、ノードは node_modules まで、特定の順序で react が見つかります。より詳しく理解するために、次のように読むことができます。 ここで .