Question

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

重复声明＆＃34; InboxPane＆＃34;

代码如下：

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 run 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安装它们。

模块构建失败，重复声明

1 个答案: