0
我按照教程来设置我的ReactJs项目，但是我不能解决这个错误，因为我是新手。我无法弄清楚出现的语法错误，任何帮助表示赞赏。在构建reactjs项目时无法找出错误
的package.json
{
"name": "website",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build" : "webpack",
"start" : "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"webpack": "^2.2.1"
},
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-react": "^6.23.0",
"html-webpack-plugin": "^2.28.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2"
}
}
webpack.config.js
var HTMLWebpackPlugin=require('html-webpack-plugin')
var HTMLWebpackPluginCongif=new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename : 'index.html',
inject: 'body'
});
module.exports={
entry: __dirname + '/app/index.js',
module :{
loaders:[
{
test:/\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
output:{
filename:'transformed.js',
path:__dirname +'/build'
},
plugins:[HTMLWebpackPluginCongif]
};
index.js
var React=require('react');
var ReactDOM=require('react-dom');
var App=require('./components/App');
ReactDOM.render(<App />,document.getElementById('app'));
的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first Local App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
App.js
var React=require('react')
var ReactDOM=require('react-dom')
var x=React.createClass({
render:function(){
return <h1> Hello World </h1>;
}
});
module.exports={comp:x}
以下是错误日志：
> [email protected] build C:\Users\sujit\Desktop\website
> webpack
Hash: b51693bc620c8a95d39b
Version: webpack 2.2.1
Time: 554ms
Asset Size Chunks Chunk Names
transformed.js 3.4 kB 0 [emitted] main
index.html 3.02 kB [emitted]
[0] ./app/index.js 771 bytes {0} [built] [failed] [1 error]
ERROR in Error: Child compilation failed:
Entry module not found: Error: Can't
resolve 'C:\Users\sujit\Desktop\website\app\index.html'
in 'C:\Users\sujit\Desktop\website':
Error: Can't resolve 'C:\Users\sujit\Desktop\website\app\index.html'
in 'C:\Users\sujit\Desktop\website'
- compiler.js:76
[website]/[html-webpack-plugin]/lib/compiler.js:76:16
- Compiler.js:280 Compiler.<anonymous>
[website]/[webpack]/lib/Compiler.js:280:10
- Compiler.js:480
[website]/[webpack]/lib/Compiler.js:480:13
- Tapable.js:138 next
[website]/[tapable]/lib/Tapable.js:138:11
- CachePlugin.js:62 Compiler.<anonymous>
[website]/[webpack]/lib/CachePlugin.js:62:5
- Tapable.js:142 Compiler.applyPluginsAsyncSeries
[website]/[tapable]/lib/Tapable.js:142:13
- Compiler.js:477
[website]/[webpack]/lib/Compiler.js:477:10
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[website]/[tapable]/lib/Tapable.js:131:46
- Compilation.js:640 self.applyPluginsAsync.err
[website]/[webpack]/lib/Compilation.js:640:19
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[website]/[tapable]/lib/Tapable.js:131:46
- Compilation.js:631 self.applyPluginsAsync.err
[website]/[webpack]/lib/Compilation.js:631:11
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[website]/[tapable]/lib/Tapable.js:131:46
- Compilation.js:626 self.applyPluginsAsync.err
[website]/[webpack]/lib/Compilation.js:626:10
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[website]/[tapable]/lib/Tapable.js:131:46
- Compilation.js:622 sealPart2
[website]/[webpack]/lib/Compilation.js:622:9
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[website]/[tapable]/lib/Tapable.js:131:46
- Compilation.js:570 Compilation.seal
[website]/[webpack]/lib/Compilation.js:570:8
- Compiler.js:474
[website]/[webpack]/lib/Compiler.js:474:16
- Tapable.js:225
[website]/[tapable]/lib/Tapable.js:225:11
- Compilation.js:472 _addModuleChain
[website]/[webpack]/lib/Compilation.js:472:11
- Compilation.js:365 Compilation.errorAndCallback
[website]/[webpack]/lib/Compilation.js:365:4
- Compilation.js:382 moduleFactory.create
[website]/[webpack]/lib/Compilation.js:382:12
- NormalModuleFactory.js:234
[website]/[webpack]/lib/NormalModuleFactory.js:234:19
- NormalModuleFactory.js:59 onDoneResolving
[website]/[webpack]/lib/NormalModuleFactory.js:59:20
- NormalModuleFactory.js:126
[website]/[webpack]/lib/NormalModuleFactory.js:126:20
- async.js:3694
[website]/[async]/dist/async.js:3694:9
- async.js:359
[website]/[async]/dist/async.js:359:16
- async.js:933 iteratorCallback
[website]/[async]/dist/async.js:933:13
- async.js:843
[website]/[async]/dist/async.js:843:16
- async.js:3691
[website]/[async]/dist/async.js:3691:13
ERROR in ./app/index.js
Module build failed: SyntaxError: C:/Users/sujit/Desktop/website/app/index.js: Unexpected token (5:16)
3 | var App=require('./components/App');
4 |
> 5 | ReactDOM.render(<App />,document.getElementById('app'));
| ^
6 |
Child html-webpack-plugin for "index.html":
ERROR in Entry module not found: Error: Can't resolve 'C:\Users\sujit\Desktop\website\app\index.html' in 'C:\Users\sujit\Desktop\website'
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the website package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs website
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls website
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\sujit\Desktop\website\npm-debug.log`
Try module.exports = x;而不是module.exports = {comp：x}; – fungusanthrax
不，它没有工作 – Sujith