this is undefined for React components

I have a jsx file which is roughly the following:

let React = require('react');

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

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

When I browserify my code, the outcome is:

var React = require('react');

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

  render: function() {
    return React.createElement('div', null, undefined.state.username);
  }
});

Notice the undefined.state.username bit. Any idea where it comes from?

Thanks 😃

[sebmck]

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>);
  }
});

[zertosh]

@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.