Comment configurer Babel 6 stage 0 avec React et Webpack

Ma compréhension des docs

Je vois que Babel 6 a trois presets pour l’instant: es2015, react et stage-x. J’ai lu que je peux définir ceux de .babelrc comme .babelrc :

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

ou directement dans package.JSON ainsi:

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

Je peux utiliser babel-loader avec Webpack comme ceci:

 loader: 'babel?presets[]=es2015' 

Mon problème

Donc, pour comstackr tout ce qui est sympa et net, j’ajoute babel-loader , qui vient d’être mis à jour pour fonctionner avec Babel6, à la configuration Webpack comme ceci:

 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) }, [...] 

Maintenant, lorsque je comstack sans .babelrc dans les options root ou prédéfinies définies dans package.JSON , c’est-à-dire uniquement avec le paramètre prédéfini babel-loader es2015 dans la configuration webpack, j’obtiens une erreur de jeton inattendue sur les propTypes statiques

 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 = { | ^ 

Sur GitHub, on m’a dit qu’il s’agissait d’une fonctionnalité de niveau stage-1 , à savoir les transform-class-properties . Donc, je voudrais mettre en œuvre la stage-0 immédiatement.
MAIS
Lorsque je le fais en ajoutant .babelrc ou en définissant package.JSON comme ci-dessus, je reçois une erreur d’échec de génération très étrange:

 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 en résumé: La 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? 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?

C’est là que je suis coincé. J’ai écrit ce composant avec Babel5 quand j’ai pu comstackr avec babel-loader comme ça et tout fonctionnait bien:

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

Maintenant, je reçois les erreurs mentionnées lors de la compilation.

  • Est-ce un problème de babel-loader ou un problème de babel ?
  • Où dois-je configurer stage-0 pour qu’il ne jette pas d’erreurs?

Mettre à jour

Lors de la compilation avec des préréglages définis et en utilisant la solution de contournement mentionnée pour le bogue d’exportation de classe (ne doit pas exporter de classe avant sa création), l’ordre des préréglages définis modifie le message d’erreur. Lorsque je mets stage-0 premier, l’erreur est maintenant 'this' is not allowed before super() (This is an error on an internal node. Probably an internal error) erreur de syntaxe d’en haut.

Dernier

Pour en savoir plus sur les dernières avancées concernant ces bogues, consultez mon article ou le nouveau suivi des problèmes de babel sur le phabricator . (Fondamentalement, la compilation est corrigée à partir de 6.2.1 mais il y a d’autres choses qui se passent maintenant)

Tous les bugs mentionnés dans cet article sont complètement corrigés à partir de Babel 6.3.x. Veuillez mettre à jour vos dépendances si vous rencontrez toujours des problèmes.

Les deux bugs assez lourds que j’ai rencontrés ici, à savoir l’exportation directe d’une classe ES6 avec une propriété statique et un problème avec le constructeur ES6, sont discutés dans les réponses de ce sujet et peuvent être trouvés explicitement sur GitHub (bogue d’exportation). ici (bogue constructeur) . (GitHub Issue Tracker a été fermé et les problèmes, les bogues et les requêtes ont été déplacés ici .)

Ce sont deux bogues officiellement confirmés, corrigés depuis Babel 6.3.17

(Peut-être un ou deux plus tôt, pas avant 6.3.x, c’est la version sur laquelle je travaille et tout fonctionne comme avec Babel5. Heureux de coder tout le monde.)


(Pour les disques 🙂

Donc, si vous obtenez le message d’erreur suivant dans la CLI:

We don't know what to do with this node type. We were previously a Statement but we can't fit in here?

Il y a des chances que vous exportiez une classe ES6 avec une propriété statique comme celle-ci ou d’une manière similaire (notez que cela ne semble plus être connecté à la classe en cours d’extension mais plutôt à une classe ayant une propriété statique) :

 import React, { Component, PropTypes } from 'react' export default class ClassName extends Component { static propTypes = {...} // This will not get comstackd correctly for now, as of Babel 6.1.4 } 

La solution simple comme mentionné par Stryzhevskyi et plusieurs personnes sur GitHub:

 import React, { Component, PropTypes } from 'react' class ClassName extends Component { static propTypes = {...} } export default ClassName // Just export the class after creating it 


Le deuxième problème concerne l’erreur suivante:

'this' is not allowed before super() (This is an error on an internal node. Probably an internal error)

Bien qu’il s’agisse d’une règle légitime, comme le souligne Dominic Tobias, il s’agit d’un bug confirmé où il apparaît que les classes étendues ayant leurs propres propriétés lancent ce message ou un message similaire. Pour l’instant je n’ai pas vu de solution de contournement pour celui-ci. Beaucoup de gens sont revenus à Babel5 pour cette raison (à partir du 6.1.4).

Soi-disant, cela a été corrigé avec la sortie de Babel 6.1.18 (voir le problème de GitHub ci-dessus) mais les gens, y compris moi, voient toujours le même problème.


Notez également que, pour l’instant, l’ordre dans lequel vous chargez les présélections de babel stage-x , react et es2015 semble être important et peut modifier votre sortie.


À partir de Babel 6.2.1

Ces deux bogues sont corrigés , le code comstack correctement. Mais … il y en a encore un qui affecte probablement beaucoup de personnes travaillant avec Rea, qui jette ReferenceError: this hasn't been initialised - super() hasn't been called à l’exécution. Référencé ici . Restez à l’écoute…

Complètement réparé depuis Babel 6.3.17

(Peut-être un ou deux plus tôt, pas avant 6.3.x, c’est la version sur laquelle je travaille et tout fonctionne comme avec Babel5. Heureux de coder tout le monde.)

Essayez de remplacer votre export par une telle construction:

 class SurveyForm extends Component {/*implementation*/} export default SurveyForm 

Voici un exemple de travail avec Babel 6, React, Webpack et Sequelize:

https://github.com/BerndWessels/react-webpack

En gros c’est le .babelrc

 { "presets": [ "es2015", "react", "stage-0" ], "env": { "development": { "plugins": [ "babel-relay-plugin-loader", [ "react-transform", { "transforms": [ { "transform": "react-transform-hmr", "imports": [ "react" ], "locals": [ "module" ] }, { "transform": "react-transform-catch-errors", "imports": [ "react", "redbox-react" ] } ] } ] ] }, "production": { "plugins": [ "babel-relay-plugin-loader" ] } } } 

et ce sont les versions du module

 babel-core@6.3.17 babel-loader@6.2.0 babel-plugin-react-transform@2.0.0-beta1 babel-preset-es2015@6.3.13 babel-preset-react@6.3.13 babel-preset-stage-0@6.3.13 

Ça marche pour moi.

Après avoir rencontré les mêmes problèmes, j’ai pu utiliser React avec la configuration WebPack ci-dessous.

 module.exports = { entry: './app/Index.js', output: { path: __dirname, filename: 'dist/bundle.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel', query: { presets: ['react'] } } ] } }; 

Je devais aussi installer babel-preset-reaction.

 npm install --save-dev babel-preset-react 

EDIT: Bien sûr, vous devrez peut-être également inclure le preset ES2015 si vous écrivez également ES6.

Les presets Babel peuvent être trouvés ici: https://github.com/babel/babel/tree/development/packages

As-tu essayé?:

 presets: [{ plugins: [ 'transform-class-properties' ] }, 'stage-0', 'es2015', 'react'] 

Avez-vous essayé d’utiliser juste stage-1 ?

L’utilisation de la propriété de requête a fonctionné pour moi.

 ``` module: { loaders: [{ test: /\.jsx?$/, loader: 'babel', query: { presets: ['es2015', 'stage-1', 'react'] } }] } ``` 

Bien sûr, je n’ai pas pu utiliser les options .babelrc et babel dans package.json . J’essaie toujours de comprendre babel-*v6.0