Reputation: 2481
I have just started using a new JS stack - Node, Webpack, Babel, React and ExpressJS with ES6. Never used any of these previously. I am having issues where I am getting the error:
Module build failed: SyntaxError: Unexpected token (7:8)
on the line state = {
In the file Login.js which is:
import React from 'react';
import styles from './Login.css';
import auth from './auth.js';
class Login extends React.Component {
state = {
redirectToReferrer: false
}
login(e) {
e.preventDefault();
console.log('logging in');
auth.authenticate("/");
}
render() {
if (redirectToReferrer) {
return (
<Redirect to="/" />
)
}
return (
<div className={styles.loginPage}>
<div className={styles.form}>
<form className={styles.loginForm}>
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button onClick={this.login}>login</button>
</form>
</div>
</div>
);
}
}
export default Login;
However, I believe that is the correct syntax as I am trying to learn/follow from the react training website which has exactly the same.
So I assume it is my stack configuration and its not compiling something that way it should. Though, some ES6 is obviously being compiled as import
is working.
Here is my stack files, shortened for brevity
package.json
{
"name": "exampleApp",
"version": "1.0.0",
"description": "NodeJS version of the control panel",
"main": "server.js",
"scripts": {
"start": "babel-node ./server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
...
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"css-loader": "^0.28.4",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.3.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.0.1",
"react-hot-loader": "^3.0.0-beta.7",
"redux-devtools": "^3.4.0",
"style-loader": "^0.18.1",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.10.2",
"webpack-dev-server": "^2.4.5",
"webpack-hot-middleware": "^2.18.0"
}
}
.babelrc
{
"presets": [
"es2015",
"react"
],
"plugins": [
"react-hot-loader/babel"
],
"env": {
"presets": [
"react-hrme"
]
}
}
webpack.config.json
const { resolve } = require('path');
const webpack = require('webpack');
module.exports = {
context: resolve(__dirname, 'src'),
devtool: 'source-map',
entry: [
'react-hot-loader/patch',
resolve(__dirname, './src/index.js'),
],
output: {
path: resolve(__dirname, 'src'),
publicPath: '/',
filename: 'bundle.js',
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'eslint-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['babel-loader'],
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader?modules', ],
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
],
}
I am starting my server with npm start
- In honesty I don't think this is set up correctly as hot reloading doesn't seem to work either.
Upvotes: 0
Views: 1353
Reputation: 92521
You're trying to use class properties, which are part of the stage 2 Babel preset, so you should install it (npm i -D babel-preset-stage-2
) and add it to your presets list.
Or you can add only the transform-class-properties
plugin.
Upvotes: 1