title: Uncaught Error: Cannot find module "./components/LoginPage"
body: <p>This my webpack.config file</p>
  
  <pre><code>import webpack from 'webpack'
  import path from 'path'
  
  export default {
  devtool: 'inline-source-map',
  
  entry: [
      path.resolve(__dirname, 'src/index.js')
  ],
  target: 'web',
  output: {
      path: path.resolve(__dirname, 'src'),
      publicPath: '/',
      filename: 'bundle.js'
  },
  resolve: {
     extensions: ['.js', '.jsx']
   },
  module: {
      loaders: [{
          test: /\.(js|jsx)$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
              presets: ['es2015', 'react']
          }
      }]
  }
  };
  </code></pre>
  
  <p>This is my package.json file</p>
  
  <pre><code>{
        "name": "zresume",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "start": "nodemon server/server.js --exec babel-node"
        },
        "author": "",
        "license": "ISC",
        "dependencies": {
          "bootstrap": "^3.3.7",
          "d3": "^4.10.2",
          "express": "^4.15.4",
          "nodemon": "^1.12.0",
          "path": "^0.12.7",
          "react": "^15.6.1",
          "react-bootstrap": "^0.31.3",
          "react-dom": "^15.6.1",
          "react-router": "^4.2.0",
          "redux": "^3.7.2"
        },
        "devDependencies": {
          "babel-cli": "^6.26.0",
          "babel-core": "^6.26.0",
          "babel-loader": "^7.1.2",
          "babel-preset-es2015": "^6.24.1",
          "babel-preset-react": "^6.24.1",
          "babel-preset-react-hmre": "^1.1.1",
          "open": "0.0.5",
          "webpack": "^3.6.0",
          "webpack-dev-middleware": "^1.12.0"
        },
        "babel": {
          "presets": [
            "es2015"
          ],
          "env": {
            "presets": [
              "react-hmre"
            ]
          }
        }
      }
  </code></pre>
  
  <p>My index.js file </p>
  
  <pre><code>import React from 'react';
      import ReactDOM from 'react-dom';
      import LoginPage from './components/LoginPage';
  
      class App extends React.Component {
          render(){
              return(
                  &lt;div&gt;
                      &lt;h1&gt;El Juego Lindo&lt;/h1&gt;
                      &lt;div&gt;
                      &lt;LoginPage /&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              );
          }
      }
  
      ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>LoginPage Component</p>
  
  <pre><code>import React from 'react';
      import { Button, Collapse } from 'react-bootstrap';
      import LoginForm from './LoginForm';
  
      class LoginPage extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                onButtonClicked: false
            }
            this.onButtonClick = this.onButtonClick.bind(this);
        }
  
        onButtonClick() {
            this.setState({
                onButtonClicked: !this.state.onButtonClicked
            });
        }
  
       render() {
         return (
           &lt;div&gt;
           &lt;div&gt; I love football!!!! &lt;/div&gt;
           &lt;Button className="footballButton" onClick={this.onButtonClick} bsStyle="primary" bsSize="large" block&gt;Football Lover&lt;/Button&gt;
           &lt;Collapse in={this.state.onButtonClicked}&gt;
             &lt;div&gt;
               &lt;LoginForm /&gt;
             &lt;/div&gt;
           &lt;/Collapse&gt;
           &lt;/div&gt;
         );
       } 
  
  
      }
  
      export default LoginPage;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Y60r7.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>Hi guys I'm a pretty novice programmer, and I'm having trouble with my react components rendering. For some reason it is saying that it can't find the module. Can anyone guide me in the right direction?</p>