SyntaxError dans Webpack/React.js jeton inattendu = {} dans React

Question

Dans l'un de mes fichier .js, je reçois l'erreur suivante de Webpack:

4 | export default function(ComposedComponent) { 
    5 | class Authentication extends Component { 
> 6 |  static contextTypes = { 
    |      ^
    7 |  router: React.PropTypes.object 
    8 |  } 
    9 | 

Ce sont mes devdependencies:

"devDependencies": { 
    "babel-core": "^6.17.0", 
    "babel-loader": "^6.2.0", 
    "babel-plugin-transform-object-rest-spread": "^6.26.0", 
    "babel-preset-env": "^1.6.0", 
    "babel-preset-react": "^6.16.0", 
    "babel-preset-stage-3": "^6.24.1", 
    "css-loader": "^0.26.1", 
    "file-loader": "^1.1.4", 
    "html-webpack-plugin": "^2.30.1", 
    "image-webpack-loader": "^3.4.2", 
    "rimraf": "^2.6.2", 
    "style-loader": "^0.13.1", 
    "url-loader": "^0.5.9", 
    "webpack": "2.2.0-rc.0", 
    "webpack-dev-server": "^2.2.0-rc.0" 
    } 

et voici ma configuration Webpack:

{ 
    "presets": ["env", "react", "stage-3"], 
    "plugins": ["transform-object-rest-spread"] 
} 

Quelqu'un pourrait dire quel plugin ou package est manquant? Merci!

Answer 1

Rien ne manque, c'est juste une syntaxe incorrecte.

Les méthodes statiques doivent être (comme son nom l'indique) des fonctions.

Essayez:

class Authentication extends Component { 
    ... 
} 

Authentication.contextTypes = { 
    router: React.PropTypes.object 
} 

Answer 2

propriétés de classe est une étape 2 proposition en ce moment, il est donc pas inclus dans babel-preset-env. Vous pouvez:

• ne comprennent que cette transformation spécifique avec .babelrc:

  { "plugins": [ "transformation de classe-propriétés"] }

• comprennent toutes les étapes 2 propositions avec:

  { "presets": [ "env", "réagir", "étape 2"] }

S'il vous plaît examiner les risques avant d'ajouter toutes les propositions stage-2: https://babeljs.io/docs/plugins/preset-stage-2/