Babel kompiliert nicht innerhalb einer Klasse

Question

Ich habe gerade angefangen, einen neuen JS-Stack zu verwenden - Node, Webpack, Babel, React und ExpressJS mit ES6. Habe noch nie zuvor eines davon benutzt. Ich Fragen habe, wo ich die Störung erhalte:

Module build failed: SyntaxError: Unexpected token (7:8)

auf der Linie state = {

In der Datei Login.js das ist:

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; 

Allerdings glaube ich, dass ist die korrekte Syntax, wie ich versuche zu lernen/folgen von the react training website, die genau das gleiche hat.

Also ich nehme an, es ist meine Stack-Konfiguration und es kompiliert etwas nicht so, wie es sollte. Einige ES6 werden jedoch offensichtlich kompiliert, da import funktioniert.

Hier ist meine Stapel Dateien, der Kürze halber verkürzt

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

Ich beginne meinen Server mit npm start - In Ehrlichkeit denke ich nicht, dass dies richtig eingerichtet ist, da das heiße Nachladen auch nicht zu funktionieren scheint.

Answer 1

Sie versuchen, Klasseneigenschaften zu verwenden, die Teil der stage 2 Babel preset sind, also sollten Sie sie installieren (npm i -D babel-preset-stage-2) und sie zu Ihrer Voreinstellungsliste hinzufügen.

Oder Sie können nur die transform-class-properties plugin hinzufügen.