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

Question

这是我的 webpack.config 文件

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

这是我的 package.json 文件

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

我的 index.js 文件

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'));

登录页面组件

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;

在此处输入图片说明

大家好，我是一个相当新手的程序员，我的 React 组件渲染有问题。 出于某种原因，它说它找不到模块。 任何人都可以指导我朝着正确的方向前进吗？

Answer 1

您应该将文件命名为“.js”，而不是“.jsx”

如果必须使用“.jsx”，则需要在导入时指定文件结尾：

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

否则，Webpack 假定您使用了“.js”

Answer 2

Webpack 3 存在问题，您必须在接受的扩展中添加一个blank space ，如下所示。

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

但我也建议添加别名以避免使用. （点），并删除以前的解决方法

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

现在你可以像这样导入你的组件

import YourComponent from 'Components/Login'

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

还要检查babel-node是否存在 ES6 模块自动加载问题https://babeljs.io/docs/usage/cli/#babel-node