无法解释的语法错误 [英] Unexplained syntax error
问题描述
我遇到了我根本无法解释的语法错误.
I am running into a syntax error that I simply cannot explain.
代码:
import React, { Component } from 'react';
class Button extends Component{
handleClick = () => {
this.props.onClickFunction(this.props.incrementValue)
}
render() {
return (
<button onClick={this.handleClick}>
+{this.props.incrementValue}
</button>
);
}
}
错误消息-意外令牌(4:14):
Error Message - Unexpected token (4:14):
2 |
3 | class Button extends Component{
> 4 | handleClick = () => {
| ^
5 | this.props.onClickFunction(this.props.incrementValue)
6 | }
7 |
我以前曾使用过此代码,但是我想尝试使用webpack,由于这些更改,我收到了此错误.据我了解,这是es2015中引入的新语法.我相信我已经正确配置了所有内容:
I had this code working before, but I wanted to experiment with webpack and since those changes, I am receiving this error. To my understanding, this is a new syntax introduced in es2015. I believe I have everything properly configured:
"devDependencies": {
"axios": "^0.17.1",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.0.0-beta.2",
"font-awesome": "^4.7.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-fontawesome": "^1.6.1",
"react-scripts": "1.0.17",
"reactstrap": "^5.0.0-alpha.4",
"webpack": "~3.9.1",
"webpack-dev-server": "^2.9.5"
}
module.exports = {
entry: "./index.js",
output:{
filename:"public/bundle.js"
},
module:{
loaders:[
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query:{
presets:['react', 'es2015']
}
}
]
}
}
我的第一个想法是,也许我对es2015的配置不正确.但是我尝试使用普通的函数语法,但仍然收到以下错误:
My first thought was, maybe my configuration for es2015 is incorrect. But I tried using the normal function syntax and still received the following error:
2 |
3 | class Button extends Component{
> 4 | handleClick = function(){
| ^
5 | this.props.onClickFunction(this.props.incrementValue)
6 | }
7 |
推荐答案
You need to install babel-preset-stage-0 as a dev dependency like this :
npm install --save-dev babel-preset-stage-0
,并且最好如文档中所述,您需要添加它到.babelrc
文件,(您可以在与webpack.config.js
相同的根目录中创建一个.babelrc
文件),并像这样添加:
and preferably as mentioned in the documentation you need to add it to the .babelrc
file , (you can create a .babelrc
file in the root directory same place where webpack.config.js
is ) and add like this :
{"presets":["react", "es2015", "stage-0"]}
或者,如果您喜欢在使用时在webpack.config.js
中,则可以在查询对象中执行以下操作:
Or if you prefer inside webpack.config.js
as you are using , in your query object you can do :
query: {presets:["react", "es2015", "stage-0"]}
这篇关于无法解释的语法错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!