Como configurar o Babel 6 estágio 0 com React e Webpack

Minha compreensão dos documentos

Vejo que o Babel 6 tem três predefinições por enquanto: es2015, react e stage-x. Eu li que posso definir aqueles em.babelrc igual a:

{
  "presets": ["es2015", "react", "stage-0"]
}

ou diretamente no package.JSON assim:

{
  ...,
  "version": x.x.x,
  "babel": {
    "presets": ["es2015", "react", "stage-0"]
  },
  ...,
}

Eu ainda posso usar o babel-loader com o webpack assim:

loader: 'babel?presets[]=es2015'


Meu problema

Então, para compilar tudo de bom e limpo, estou adicionandobabel-loader, que acabou de ser atualizado para funcionar com o Babel6, para a configuração do webpack assim:

module.exports = function(options) {
  var jsLoaders = ['babel?presets[]=es2015'];
  [...]
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: jsLoaders
      },
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loaders: options.production ? jsLoaders : ['react-hot'].concat(jsLoaders)
      },
      [...]


Agora, quando eu compilarsem .babelrc nas opções de raiz ou predefinições definidas empackage.JSON, ou seja, apenas com a predefinição babel-loader es2015 definida na configuração do webpack, recebo um erro inesperado de token sobre propTypes estáticos na minha classe de componente React:

ERROR in ./app/components/form/index.jsx
Module build failed: SyntaxError: /Library/WebServer/Documents/yarsk.test/app/components/form/index.jsx: Unexpected token (19:19)
  17 | // ES6 React Component:
  18 | export default class SurveyForm extends Component {
> 19 |   static propTypes = {
     |                    ^

No GitHub me disseram que este é umstage-1 característica, a sabertransform-class-properties. Então eu gostaria de implementarstage-0 Imediatamente.
MAS
Quando faço isso adicionando.babelrc ou definindopackage.JSON Como acima, recebo um erro de falha de compilação muito estranho:

ERROR in ./app/components/form/index.jsx
Module build failed: Error: /Library/WebServer/Documents/yarsk.test/app/components/form/index.jsx: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?
    at NodePath.insertAfter (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/modification.js:181:13)
    at NodePath.replaceWithMultiple (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/replacement.js:92:8)
    at handleClassWithSuper (/Library/WebServer/Documents/yarsk.test/node_modules/babel-plugin-transform-class-constructor-call/lib/index.js:80:10)
    at PluginPass.Class (/Library/WebServer/Documents/yarsk.test/node_modules/babel-plugin-transform-class-constructor-call/lib/index.js:101:11)
    at newFn (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/visitors.js:233:27)
    at NodePath._call (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:72:18)
    at NodePath.call (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:44:17)
    at NodePath.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:102:12)
    at TraversalContext.visitQueue (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:151:16)
    at TraversalContext.visitSingle (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:111:19)
    at TraversalContext.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:195:19)
    at Function.traverse.node (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/index.js:139:17)
    at NodePath.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:106:22)
    at TraversalContext.visitQueue (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:151:16)
    at TraversalContext.visitMultiple (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:106:17)
    at TraversalContext.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:193:19)
    at Function.traverse.node (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/index.js:139:17)
 @ ./app/index.jsx 9:0-28

Ou, resumindo:Module build failed: Error: /.../index.jsx: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?

É aqui que estou preso. Eu escrevi esse componente com o Babel5 quando pude compilar com o babel-loader assim e tudo funcionou bem:

loader: 'babel?optional[]=runtime&stage=0

Agora estou recebendo os erros mencionados na compilação.

Isso é umbabel-loader problema ou umbabel questão?Onde eu tenho que configurarstage-0 para que não gere erros?


Atualizar

Ao compilar com predefinições definidas e usar a solução alternativa mencionada para o erro de exportação de classe (não deve exportar classe até depois de criá-la), a ordem das predefinições definidas altera a mensagem de erro. Quando eu definirstage-0 primeiro o erro agora é'this' is not allowed before super() (This is an error on an internal node. Probably an internal error) Quando eu colocostage-0 segundo ou terceiro, recebo a mensagem sobre erro de sintaxe acima.


Mais recentes

Para os últimos avanços em relação a esses bugsveja minha postagem ouo novo rastreador de problemas babel no phabricator para mais.(Basicamente, a compilação é corrigida a partir da 6.2.1, mas há outras coisas acontecendo agora)

Todos os erros mencionados neste artigo foram completamente corrigidos no Babel 6.3.x. Atualize suas dependências se você ainda estiver tendo problemas.

questionAnswers(6)

yourAnswerToTheQuestion