REACT.JS : 多主错误
REACT.JS : Multi main Error
我是 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
因此我的 package.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:
<!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>
App.jsx :
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
main.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
webpack.config.js
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8123
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
所以每当我启动时 "npm start " 我得到一个失败的构建(捕获-附加-)
并且类似地,在 localhost:8123 上,我遇到了如下相同的错误:
有什么解决这个问题的建议吗??
我只是通过删除 node_modules 文件夹并重新安装 npm install
来解决它
我是 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
因此我的 package.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:
<!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>
App.jsx :
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
main.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
webpack.config.js
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8123
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
所以每当我启动时 "npm start " 我得到一个失败的构建(捕获-附加-)
并且类似地,在 localhost:8123 上,我遇到了如下相同的错误:
有什么解决这个问题的建议吗??
我只是通过删除 node_modules 文件夹并重新安装 npm install
来解决它