未捕获的错误：找不到模块“./components/LoginPage”

Question

This my webpack.config file

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']
        }
    }]
}
};

This is my package.json file

{
      "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"
          ]
        }
      }
    }

My index.js file

import React from 'react';
    import ReactDOM from 'react-dom';
    import LoginPage from './components/LoginPage';

    class App extends React.Component {
        render(){
            return(
                <div>
                    <h1>El Juego Lindo</h1>
                    <div>
                    <LoginPage />
                    </div>

                </div>
            );
        }
    }

    ReactDOM.render(<App />, document.getElementById('root'));

LoginPage Component

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 (
         <div>
         <div> I love football!!!! </div>
         <Button className="footballButton" onClick={this.onButtonClick} bsStyle="primary" bsSize="large" block>Football Lover</Button>
         <Collapse in={this.state.onButtonClicked}>
           <div>
             <LoginForm />
           </div>
         </Collapse>
         </div>
       );
     } 


    }

    export default LoginPage;

enter image description here

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?

Answer 1

You should name your files ".js", not ".jsx"

If you must use ".jsx", you need to specify the file ending when importing:

import LoginPage from './components/LoginPage.jsx'

Otherwise, Webpack assumes you've used ".js"

Answer 2

There is an issue with Webpack 3 and you have to add a blank space to the accepted extensions, like this.

resolve: {
    extensions: [' ', '.js', '.jsx']

but also i recommend to add an alias to avoid import your components with the . (dot), and also remove the previous workaround

resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      'Components': path.resolve(__dirname, '/components')
    }      
}

Now you can import your Components like this

import YourComponent from 'Components/Login'

https://github.com/webpack/webpack/issues/981

Also doble check that babel-node has some issues with ES6 module autoloading https://babeljs.io/docs/usage/cli/#babel-node