Javascript REACT.JS:多主错误_Javascript_Reactjs_Webpack_React Jsx_Package.json

Javascript REACT.JS:多主错误

javascript reactjs webpack

Javascript REACT.JS:多主错误,javascript,reactjs,webpack,react-jsx,package.json,Javascript,Reactjs,Webpack,React Jsx,Package.json,我是React.JS（在Windows 10上）的新手，我正在完成第一个图托，在里面，我习惯于为我的React.app设置一个基本的工作区。但在我的职责范围内，在全球和本地设置了webpack和babel软件包，并制作了第一个hello word应用程序后，第一次构建没有成功。我的预安装： npm install -g babel npm install -g babel-cli npm install webpack --save npm install webpack-dev-server

我是React.JS（在Windows 10上）的新手，我正在完成第一个图托，在里面，我习惯于为我的React.app设置一个基本的工作区。但在我的职责范围内，在全球和本地设置了webpack和babel软件包，并制作了第一个hello word应用程序后，第一次构建没有成功。

我的预安装：

npm install -g babel
npm install -g babel-cli
npm install webpack --save
npm install webpack-dev-server --save
npm install react --save
npm install react-dom --save
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

因此，我的包.json包含：

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-cli": "^6.0.0",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.2"
  }
}

我的存储库包含4个其他文件： index.html、App.jsx、main.js、webpack.config.js

index.html:

npm install -g babel
npm install -g babel-cli
npm install webpack --save
npm install webpack-dev-server --save
npm install react --save
npm install react-dom --save
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

因此，每当我启动“npm启动”时，我都会得到一个失败的构建（捕获-附加-）

类似地，在localhost:8123上，我得到了如下相同的错误：

有没有解决这个问题的建议？？？

我只是简单地通过删除节点模块文件夹来解决，然后重新保存npm install
条目：“./main.js”
是的，但是它仍然不起作用，可能是因为构建的目标与源代码位于同一路径，所以之后它会尝试重新加载main.js吗？为什么不把你的条目和源文件放在一个单独的目录中，这样webpack就不会在以后被弄糊涂呢？是的，只要解决这个问题，然后重新安装节点模块，就解决了这个问题