[英]webpack & babel Error for react when use 'npm start'
I am a new to react. 我是新来的人。 when I use webpack to pack my code,there is a error but I can not find out the cause.
当我使用webpack打包我的代码时,出现了一个错误,但是我找不到原因。 here is the error: this is error:
这是错误:这是错误:
ERROR in ./app/main.jsx
Module parse failed: /home/liudong/Public/proj/Homepage/app/main.jsx Unexpected token (8:7)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (8:7)
at Parser.pp$4.raise (/home/liudong/Public/proj/Homepage/node_modules/acorn/dist/acorn.js:2221:15)
Here is webpack.config.js: 这是webpack.config.js:
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + '/app/main.jsx',
output: {
path: __dirname + '/public',
filename: '[name]-[hash].js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
moudle: {
loaders:[
{
test: /\.json$/,
loader:"json"
},
{
test: /\.jsx?$/,
exclude:'/node_modules/',
loader:'babel',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: 'style!css?modules'
}
]
}
//dependencies in package.json: //package.json中的依赖项:
"dependencies": {
"react": "^15.4.0-rc.4",
"react-dom": "^15.4.0-rc.4",
"react-router": "^2.8.1"
},
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.25.0",
"json-loader": "^0.5.4",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"
}
I hava tried to change loader to "babel-loader", but it did not work. 我尝试将加载程序更改为“ babel-loader”,但没有成功。
here is main.jsx: 这是main.jsx:
//main.jsx
import React from 'react'
import {render} from 'react-dom'
import Greeter from './Greeter.jsx'
import './main.css'
render(<Greeter/>, document.getElementById('container'));
Greeter.jsx Greeter.jsx
import React, {Component} from 'react'
import config from './config.json'
class Greeter extends Component {
render() {
return (
<div>
{config.greetText}
</div>
)
}
}
export default Greeter
Add json
extension in resolve - 在解析中添加
json
扩展名-
resolve: {
extensions: ['', '.json', '.js', '.jsx']
}
Also install babel
同时安装
babel
npm install --save-dev babel
I don't see it in your devDependencies
我在您的
devDependencies
不到它
Check if it works. 检查是否有效。
由于出现“模块”一词,该错误被写为“ moudle”,因此出现错误
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.