New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

`this` is undefined in arrow functions declared in constructor when extending a non-native class #8825

Open
macrozone opened this Issue Oct 8, 2018 · 2 comments

Comments

Projects
None yet
2 participants
@macrozone

macrozone commented Oct 8, 2018

Bug Report

Current Behavior

When you extend a non-native class, e.g. React.Component and you have an arrow function in your constructor, this inside this function will be undefined

Input Code

This is code from https://github.com/vazco/uniforms/:

export default class BaseForm extends Component {
    constructor () {
        super(...arguments);

        this.state = {bridge: createSchemaBridge(this.props.schema), changed: null, changedMap: {}, resetCount: 0};

        this.delayId = false;
        this.randomId = randomIds(this.props.id);

        this.onReset  = this.reset  = this.onReset.bind(this);
        this.onChange = this.change = this.onChange.bind(this);
        this.onSubmit = this.submit = this.onSubmit.bind(this);

        const getModel = this.getModel.bind(this);
        this.getModel = (mode = null, model = getModel(mode)) =>
            mode !== null && this.props.modelTransform       // this line will break
                ? this.props.modelTransform(mode, model) 
                : model
        ;
    }

This gets transpiled in my environment (meteor 1.7) to this:

class BaseForm extends Component {
  constructor() {
    var _this;

    _this = super(...arguments);
    this.state = {
      bridge: createSchemaBridge(this.props.schema),
      changed: null,
      changedMap: {},
      resetCount: 0
    };
    this.delayId = false;
    this.randomId = randomIds(this.props.id);
    this.onReset = this.reset = this.onReset.bind(this);
    this.onChange = this.change = this.onChange.bind(this);
    this.onSubmit = this.submit = this.onSubmit.bind(this); // TODO: It shouldn't be here

    const getModel = this.getModel.bind(this);

    this.getModel = function () {
      let mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
      let model = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getModel(mode);
      return mode !== null && _this.props.modelTransform ? _this.props.modelTransform(mode, model) : model;
    };
  }

as you can see, _this = super(...arguments); returns undefined

Expected behavior/code

_this should not be undefined in the transpiled code

Babel Configuration (.babelrc, package.json, cli command)

meteor default, this transpiles code only on browser that needs transpiling.

Environment

  • Babel version(s): 7.0.0
  • Node/npm version: meteor 1.7.1
  • OS: macOS mojave
  • How you are using Babel: meteor
@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Oct 8, 2018

Collaborator

Hey @macrozone! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

Collaborator

babel-bot commented Oct 8, 2018

Hey @macrozone! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

@macrozone

This comment has been minimized.

Show comment
Hide comment
@macrozone

macrozone Oct 8, 2018

probably related to #8019

macrozone commented Oct 8, 2018

probably related to #8019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment