How to set up Babel 6 stage 0 using React and Webpack

Question

My understanding from the docs

I see that Babel 6 has three presets: es2015, response, and stage-x. I read that I can install the ones in .babelrc as follows:

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

or directly in the package. JSON:

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

I can use babel-loader with webpack as follows:

 loader: 'babel?presets[]=es2015' 

My problem

So, to compile everything beautiful and clean, I add the babel-loader , which has just been updated to work with Babel6, in the webpack configuration as follows:

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

Now, when I compile without .babelrc in the root settings or presets installed in package.JSON , that is, only with the preinstalled babel-loader es2015 installation installed in the webpack configuration, I get an unexpected token error about static propTypes in my React component class:

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

On GitHub I was told that this is a stage-1 function, namely transform-class-properties . Therefore, I would like to immediately implement stage-0 .
BUT
When I do this by adding .babelrc or defining package.JSON as described above, I get a very strange error with a build error:

 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 

Or in a word: 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?

This is where I am stuck. I wrote this component with Babel5 when I was able to compile using babel-loader, and everything was fine:

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

Now I get the indicated error compilation.

• Is this a babel-loader problem or a babel problem?
• Where do I need to configure stage-0 so that it doesn't throw errors?

Update

When compiling with the settings of presets and using the mentioned workaround for a class export error (should not export the class until it is created), the order of the specified presets changes the error message. When I set stage-0 , the error first is now 'this' is not allowed before super() (This is an error on an internal node. Probably an internal error) When I put stage-0 second or third, I get a syntax message error on top.

Last

For the latest advances regarding these errors, see my post or the new tracker for buffer problems on the fabricator . (Basically the compilation is fixed from 6.2.1, but other things are happening now)

All errors mentioned in this article are fully fixed with Babel 6.3.x. Update your dependencies if you still have problems.

Answer 1

Two rather serious errors that I encountered here, namely the direct export of the ES6 class with a static property and the problem with the ES6 constructor, are discussed in the answers of this thread and can be found on GitHub explicitly here (export error) and here (constructor error) . (The GitHub Issue Tracker has been closed and problems, errors, and requests have moved here .)

These are both officially confirmed bugs fixed with Babel 6.3.17

(Perhaps one or two earlier, and not before 6.3.x, this is the version I'm working on, and everything works the same as with Babel5. Happy coding of all.)

---

(For notes :)

So, if the following error message appears in the CLI:

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

Most likely you are exporting an ES6 class with a static property like this or similar (note that this does not seem to be related to an extensible class, but rather a class with a static property):

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

A simple workaround as Strizhevsky and a few people mentioned on GitHub:

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

---

The second problem is related to the following error:

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

Despite the fact that it is a legal rule, as Dominic Tobias pointed out , this is a confirmed error when, as it seems, extended classes having their own properties will throw this or a similar message, At the moment I have not seen any workarounds for this. At the moment, many people are rolling back to Babel5 for this reason (starting with 6.1.4).

This was supposedly fixed with the release of Babel 6.1.18 (see the GitHub issue above) , but people, including me, still see the exact same problem.

---

Also note that for now, the loading order of the stage-x , react and es2015 boot presets seems important and may change your result.

---

Like Babel 6.2.1

both of these errors are fixed , the code compiles in order. But ... there is one more that probably affects many people who work with responsiveness, which throws a ReferenceError: this hasn't been initialised - super() hasn't been called at run time. Link here . Keep in touch ...

Fully fixed with Babel 6.3.17

(Perhaps one or two earlier, and not before 6.3.x, this is the version I'm working on, and everything works the same as with Babel5. Happy coding of all.)

Answer 2

Try replacing your export with this design:

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

Answer 3

Here 's a working example with Babel 6, React, Webpack, and Sequelize:

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

This is basically .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" ] } } } 

and these are module versions

 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 

This works for me.

Answer 4

After I had the same problems, I was able to get this working with React using the WebPack configuration below.

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

I also needed to install babel-preset-react too.

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

EDIT: Of course, you may also need to enable the ES2015 preset if you are also writing ES6.

Babel Presets can be found here: https://github.com/babel/babel/tree/development/packages

Answer 5

You tried?:

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

Answer 6

Have you tried to use stage-1 ?

Using the query property worked for me.

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

Of course, I could not use the .babelrc and babel options in package.json . Still trying to find out babel-*v6.0