のWebPACK：モジュールが見つかりません：エラー：（相対パスで）

Question

を解決することはできません私はアプリ（このリストから除外node_modules DIR）のこのような構造を持っている：

├── actions.js 
├── bundle.js 
├── components 
│   ├── App.js 
│   ├── Footer.js 
│   ├── Link.js 
│   ├── Todo.js 
│   └── TodoList.js 
├── Containers 
│   ├── AddTodo.js 
│   ├── FilterLink.js 
│   └── VisibleTodoList.js 
├── index.html 
├── index.js 
├── main.js 
├── package.json 
├── package-lock.json 
├── reducers.js 
└── webpack.config.js 

私のWebPACKの設定は次のようになります。

module.exports = { 
    entry: "./main.js", 
    output: { 
     path: __dirname, 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
      test: /\.js$/, 
      loader: 'babel-loader', 
      query: { 
       presets: ['es2015', 'react'] 
      } 
      } 
     ] 
    } 
}; 

NPMの設定：

{ 
    "name": "webpack-redux", 
    "version": "1.0.0", 
    "description": "", 
    "main": "main.js", 
    "scripts": { 
    "test": "nothing" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel": "^6.23.0", 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-env": "^1.6.0", 
    "babel-preset-es2015": "^6.24.1", 
    "webpack": "^3.5.5" 
    }, 
    "dependencies": { 
    "react": "^15.6.1", 
    "babel-preset-react": "^6.24.1", 
    "react-dom": "^15.6.1", 
    "react-redux": "^5.0.6", 
    "redux": "^3.7.2" 
    } 
} 

私はwebpackコマンドを実行すると、私はこのエラーを取得します：

ERROR in ./components/App.js 
Module not found: Error: Can't resolve '../containers/AddTodo' in '/home/oerp/js-programs/redux-test/components' 
@ ./components/App.js 11:15-47 
@ ./index.js 
@ ./main.js 

ERROR in ./components/Footer.js 
Module not found: Error: Can't resolve '../containers/FilterLink' in '/home/oerp/js-programs/redux-test/components' 
@ ./components/Footer.js 11:18-53 
@ ./components/App.js 
@ ./index.js 
@ ./main.js 

ERROR in ./components/App.js 
Module not found: Error: Can't resolve '../containers/VisibleTodoList' in '/home/oerp/js-programs/redux-test/components' 
@ ./components/App.js 15:23-63 
@ ./index.js 
@ ./main.js 

私components/App.js内容はこれです：

import Footer from './Footer' 
import AddTodo from '../containers/AddTodo' 
import VisibleTodoList from '../containers/VisibleTodoList' 

const App =() => (
    <div> 
    <AddTodo /> 
    <VisibleTodoList /> 
    <Footer /> 
    </div> 
) 

export default App 

そして例containers/AddTodo.jsのために：

import { connect } from 'react-redux' 
import { addTodo } from '../actions' 

let AddTodo = ({ dispatch }) => { 
    let input 

    return (
    <div> 
     <form 
     onSubmit={e => { 
      e.preventDefault() 
      if (!input.value.trim()) { 
      return 
      } 
      dispatch(addTodo(input.value)) 
      input.value = '' 
     }} 
     > 
     <input 
      ref={node => { 
      input = node 
      }} 
     /> 
     <button type="submit"> 
      Add Todo 
     </button> 
     </form> 
    </div> 
) 
} 
AddTodo = connect()(AddTodo) 

export default AddTodo 

../somethingのような二重のドットとの相対パスを理解していないようですか？

webpackは、このようなパスを理解するために何とか設定する必要がありますか？

Answer 1

あなたのファイル構造は、フォルダ名が大文字のCのContainerであると言いますが、小文字のcでcontainerをインポートしようとしています。パスでは大文字と小文字が区別されるので、どちらか一方を変更する必要があります。