Babylonian surprise token compiling react component
I'm trying to compile the following code with babel, but it gives me an "unexpected token" for the "=" character on the following line:
state = {};
Babel version: 6.24.1 (babel-core 6.25.0)
Code:
import {Button, Menu} from 'semantic-ui-react';
class AppBar extends Component {
state = {};
handleItemClick = (e, { name }) => this.setState({ activeItem: name });
render() {
const { activeItem } = this.state;
return (
<Menu>
<Menu.Item
name='dashboard'
active={activeItem === 'dashboard'}
onClick={this.handleItemClick}
>
Dashboard
</Menu.Item>
<Menu.Item
name='contacts'
active={activeItem === 'contacts'}
onClick={this.handleItemClick}
>
Contact Lists
</Menu.Item>
<Menu.Item
name='messages'
active={activeItem === 'messages'}
onClick={this.handleItemClick}
>
Messages
</Menu.Item>
</Menu>
)
}
}
ReactDOM.render(
<AppBar/>,
document.getElementById('root')
);
I am using es2015 and am responsive to presets.
What is the problem? Thank.
source to share
I am currently using these babel modules (in package.json
) for our React app:
"babel-cli": "~6.24.1",
"babel-core": "~6.25.0",
"babel-eslint": "~7.2.3",
"babel-loader": "~7.1.0",
"babel-plugin-add-module-exports": "~0.2.1",
"babel-plugin-istanbul": "^4.1.3",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "~6.24.1",
"babel-preset-es2015": "~6.24.1",
"babel-preset-react": "~6.24.1",
"babel-preset-stage-3": "^6.24.1",
"babel-register": "~6.24.1",
"babel-runtime": "~6.23.0",
And I have the following .bablerc
in my root folder:
{
"presets": [
"es2015", "react", "stage-3"
],
"plugins": ["transform-class-properties", "add-module-exports","syntax-dynamic-import"],
"env": {
"development": {
"plugins": ["react-hot-loader/babel"]
},
"coverage": {
"plugins": ["istanbul"]
}
}
}
And I define state
with the same code
export class AttributeModelListContainer extends React.Component {
static propTypes = {
// from router
params: PropTypes.shape({
project: PropTypes.string,
}),
// from mapStateToProps
[...]
}
state = {
isLoading: true,
}
}
source to share
Make sure you have set all the necessary alarm settings:
yarn add babel-loader babel-core --dev
yarn add babel-polyfill --dev
yarn add babel-preset-es2015 --dev
yarn add babel-preset-stage-2 --dev
yarn add babel-preset-react --dev
And babe is set in .babelrc in the following order:
{
"presets": ["es2015", "react", "stage-2"]
}
Include stage-2 there should be enough new features required for your development.
source to share