this is undefined for React components about babelify HOT 11 CLOSED

You can also use the method shorthand syntax inside object literals like so:

let React = require('react');

module.exports = React.createClass({
  getInitialState() { return username: 'John Doe'; },

  render() {
    return (<div>{this.state.username}</div>);
  }
});

from babelify.

@IngwiePhoenix That's being done by babel-plugin-transform-es2015-modules-commonjs. It's part of babel-preset-es2015. You can turn off transforming the top level this to undefined by passing it {allowTopLevelThis: true}. Like this:

plugins: [
  [require('babel-plugin-transform-es2015-modules-commonjs'), {allowTopLevelThis: true}]
]

That of course means that you can't use a preset, you'll have to specify the transforms individually so you can pass in that option.

from babelify.

See babel/babel#733. Arrow functions aren't equivalent to normal functions, whenever you use this inside them it refers to the outer this.

from babelify.

OK I see thanks! I suppose this would have worked if I used the Component extends React.Component and the new method definition (aka render(){ ... }. Thanks :-)

from babelify.

👍 ah that's great thanks! I did not know it worked for non-class declarations. Thanks :-)

from babelify.

No problem! Happy to answer any questions, feel free to check out our gitter room too.

from babelify.

Sorry for butting in all of a sudden :)

I just began using Babel alltogether and realized, that sometimes this:

(function(){
    // ...
}).call(this);

Would become this:

(function(){
    // ...
}).call(undefined);

instead. Namely, the undefined-treatment happens against this line: https://github.com/musictheory/oj/blob/master/src/runtime.js#L375

What is the best way to get rid of that behaviour, altogether?

from babelify.

Really? How come this won't work with a preset?

2015-11-27 5:30 GMT+01:00 Andres Suarez [email protected]:

@IngwiePhoenix https://github.com/IngwiePhoenix That's being done by
babel-plugin-transform-es2015-modules-commonjs. It's part of
babel-preset-es2015 http://babeljs.io/docs/plugins/preset-es2015/. You
can turn off transforming the top level this to undefined by passing it {allowTopLevelThis:
true}
https://github.com/babel/babel/blob/v6.2.2/packages/babel-plugin-transform-es2015-modules-commonjs/src/index.js#L127.
Like this:

plugins: [
[require('babel-plugin-transform-es2015-modules-commonjs'), {allowTopLevelThis: true}]
]

That of course means that you can't use a preset, you'll have to specify
the transforms individually so you can pass in that option.

—
Reply to this email directly or view it on GitHub
#37 (comment).

from babelify.

Presets don't take options.

from babelify.

So the workaround to get this scoped to the parent scope is the old var that = this? That's a shame. Also a shame you can't pass in options with the Babel preset :(

from babelify.

@brendensoares It's not clear what you're asking. I'd recommend dropping by our documented support channels or #javascript on Freenode if you have specific ES6 questions.

from babelify.