reactjs - example - uncaught syntaxerror unexpected token doctype react

SyntaxError en Webpack/React.js Token inesperado={} en React

Question

En uno de mis archivos .js, recibo el siguiente error de Webpack:

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

Estas son mis dependencias:

  "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"
  }

Y esta es mi configuración de Webpack:

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

¿Alguien podría decir qué complemento o paquete falta? ¡Gracias!

Answer 1

No falta nada, solo es sintaxis incorrecta.

Los métodos estáticos deberían ser (como su nombre lo implica) funciones.

Tratar:

class Authentication extends Component {
   ...
}

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

Answer 2

Class properties es una propuesta de etapa 2 en este momento, por lo que no está incluida en babel-preset-env . Tu también puedes:

• incluir solo esta transformación específica con .babelrc :

  {"complementos": ["transform-class-properties"]}

• incluir todas las propuestas de la etapa 2 con:

  {"presets": ["env", "reaccionar", "etapa-2"]}

Considere los riesgos antes de agregar todas stage-2 propuestas de la stage-2 : https://babeljs.io/docs/plugins/preset-stage-2/