Como configurar o Babel 6 estágio 0 com React e Webpack
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'
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?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.
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.