title: webpack: Module not found: Error: Can't resolve (with relative path)
body: <p>I have this structure of an app (<code>node_modules</code> dir excluded from this list):</p>
  
  <pre><code>├── 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
  </code></pre>
  
  <p>My webpack config looks like this:</p>
  
  <pre><code>module.exports = {
      entry: "./main.js",
      output: {
          path: __dirname,
          filename: "bundle.js"
      },
      module: {
          loaders: [
            {
              test: /\.js$/,
              loader: 'babel-loader',
              query: {
                presets: ['es2015', 'react']
              }
            }
          ]
      }
  };
  </code></pre>
  
  <p>npm config:</p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>
  
  <p>When I run <code>webpack</code> command, I get this error:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>My <code>components/App.js</code> content is this:</p>
  
  <pre><code>import Footer from './Footer'
  import AddTodo from '../containers/AddTodo'
  import VisibleTodoList from '../containers/VisibleTodoList'
  
  const App = () =&gt; (
    &lt;div&gt;
      &lt;AddTodo /&gt;
      &lt;VisibleTodoList /&gt;
      &lt;Footer /&gt;
    &lt;/div&gt;
  )
  
  export default App
  </code></pre>
  
  <p>And for example <code>containers/AddTodo.js</code>:</p>
  
  <pre><code>import { connect } from 'react-redux'
  import { addTodo } from '../actions'
  
  let AddTodo = ({ dispatch }) =&gt; {
    let input
  
    return (
      &lt;div&gt;
        &lt;form
          onSubmit={e =&gt; {
            e.preventDefault()
            if (!input.value.trim()) {
              return
            }
            dispatch(addTodo(input.value))
            input.value = ''
          }}
        &gt;
          &lt;input
            ref={node =&gt; {
              input = node
            }}
          /&gt;
          &lt;button type="submit"&gt;
            Add Todo
          &lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    )
  }
  AddTodo = connect()(AddTodo)
  
  export default AddTodo
  </code></pre>
  
  <p>It seems it does not understand relative path with double dots, like <code>../something</code>?</p>
  
  <p>Do I need to configure <code>webpack</code> somehow for it to understand such paths?</p>