当我尝试使用lambda表达式或我的组件的状态时,我有这个错误:
模块构建失败:SyntaxError:意外的令牌>
我认为问题在于它不能识别我项目中的ES6语法。 这是我的Webpack配置文件:
//webpack configuration file
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/frontend/public')
var APP_DIR = path.resolve(__dirname, 'src/frontend/app');
var config = {
entry: APP_DIR +'/index.jsx',
output: {
path: BUILD_DIR,
filename: 'js/bundle.js',
publicPath: '/'
},
resolve: {
extensions: [".jsx", ".js"]
},
devServer: {
historyApiFallback: true,
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: APP_DIR,
loader: 'babel-loader',
query: {
presets: ['react','es2015']
}
},
{
test: /\.css$/,
loader: 'style-loader'
}, {
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
]
}
};
module.exports = config;
我的.babelrc
配置得很好
这是我的文件导致错误Login.jsx
:
import React from 'react';
import {render} from 'react-dom';
import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import { Link } from "react-router-dom";
import style from "./Login.css";
export default class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: ""
};
}
//the error occurs here for the "="
handleSubmit = (event) => {
event.preventDefault();
console.log('euh my man '+ this.state.email+ ': ' +this.state.password);
}
handleMyChange = event => {
this.setState({
[event.target.id]: event.target.value
});
}
render() {
return (
<div className={style.Login}>
<form className = {style.form} onSubmit = {this.handleSubmit}>
<FormGroup controlId="email" bsSize="large">
<ControlLabel>Email</ControlLabel>
<FormControl
autoFocus
value={this.state.email}
onChange={this.handleMyChange}
type="email"
placeholder = "email"
/>
</FormGroup>
<FormGroup controlId="password" bsSize="large">
<ControlLabel>Password</ControlLabel>
<FormControl
type="password"
placeholder="password"
value={this.state.password}
onChange={this.handleMyChange}
/>
</FormGroup>
<Button
block
bsSize="large"
//disabled={!this.validateForm()}
onClick = {this.handleSomething}
type="submit"
>
Login
</Button>
</form>
</div>
);
}
}
//export default Login;