React.jsのモジュールが見つかりません（見つからない）

Question

明らかな質問をしているとは思えませんが、コンソールログにエラーが表示されます。

コンソールでは、ディレクトリ内にモジュールが見つからないと表示されていますが、誤植の少なくとも10回はチェックしました。とにかく、ここにコンポーネントコードがあります。

私はこれは私がモジュールがこの場所./src/components/header/headerであることを少なくとも10回をチェックしました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')); 

ある

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.js"が含まれています）。

しかし、それでもこのエラーがスローされますリアクト：

は

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

NPMテストのコンパイルに失敗しましたが、同じことを言います。

Answer 1

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

.と..たちは、現在のディレクトリにfileを移動するには、ディレクトリの外とmv ~/file .行きcd ..ようterminalにナビゲートするために使用する方法に似ています。あなたのケースでは

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

header.jsがsrc/componentsでありながら、App.jsはsrc/ディレクトリにあります。 importにはimport Header from './components/header'を入力します。これは私の現在のディレクトリに大まかに変換され、ヘッダファイルを含むコンポーネントフォルダを見つけます。

header.jsからimport何かが必要な場合は、cardから入力してください。 import Card from '../containers/card'。これは、現在のディレクトリから移動して、カードファイルを持つフォルダ名のコンテナを探します。 reactが発見されるまでimport React, { Component } from 'react'として

、これは./又は../又は/で始まらない、したがってノードは、特定の順序でnode_modulesモジュールを探し始めるだろう。詳細を理解するためには、を読むことができます。

Answer 2

あなたが設定した環境変数を忘れないでください反応-作成アプリを使用してアプリケーションを作成する場合：

NODE_PATH=./src 

をまたはあなたのルートフォルダにファイルを.envに追加します。