webpack: Module introuvable: Erreur: Impossible de résoudre (avec chemin relatif)

Question

J'ai cette structure d'une application (node_modules dir exclu de cette liste):

├── 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 

Ma config webpack ressemble à ceci:

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

config 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" 
    } 
} 

Quand je lance la commande webpack, je reçois cette erreur :

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 

Mon contenu components/App.js est la suivante:

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

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

export default App 

Et par exemple 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 

Il semble qu'il ne comprend pas le chemin relatif avec deux points, comme ../something?

Ai-je besoin de configurer webpack pour comprendre ces chemins?

Answer 1

La structure de votre fichier indique que le nom du dossier est Container avec une majuscule C. Mais vous essayez de l'importer par container en minuscule c. Vous devrez changer l'un ou l'autre parce que les chemins sont sensibles à la casse.