模块构建失败，重复声明

Question

我正在关注有关 React JS 的 Microsoft 教程，在第一部分中，该示例有一个 app.js 正在通过对 index.html 的反应进行渲染，在此之前我需要运行 start-webpack-server 来设置 localhost8080。但是我无法通过这个，在 \ npm 运行 start-webpack-server 之后，我得到了错误：

重复申报"InboxPane"

代码如下：

app.js

var React = require('react');
var ReactDOM = require('react-dom');
import InboxPane  from './../../../../05_ES6/Code/fork-es6/app/components/InboxPane';

var App = React.createClass({
    render: function(){

        return (
            <div>
             <div id = 'header'> </div>
             <div className = "container"> 
                 <div className = "column">
                 <InboxPane /> 
                 </div>
             </div>
            </div>
        )
    }

});

var InboxPane = React.createClass ({
    render: function(){
        return (
            <div id = 'inbox-pane'>
                <h1>Inbox</h1>
            </div>
        )
    }

});

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pizza Chain Bot Manager</title>
  <link rel="stylesheet" href="/app/app.css">
</head>
<body>
  <div id="main">
  </div>

  <script src="/bundle.js"></script>

</body>
</html>

npm 运行 start-webpack-server:

后命令行出现错误信息

ERROR in ./app/app.js
Module build failed: 
C:/ReactMVA master/02_ReactIntroduction/Code/start/app/app.js: Duplicate 
  declaration "InboxPane"

     20 | });
  21 |
> 22 | var InboxPane = React.createClass ({
     |     ^
  23 |     render: function(){
  24 |         return (
  25 |             <div id = 'inbox-pane'>

 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-
 server ./index.html ./app.js
  webpack: Failed to compile.

Answer 1

Webpack 似乎找不到 babel-loader 和 file-loader。如果这些在您的 package.json 中，那么 npm install 应该可以解决问题。否则，使用 npm install babel-loader file-loader --dev.

安装它们

模块构建失败，重复声明

Module build failed , Duplicate declaration

reactjs

webpack-dev-server