Arrow-function default parameter not behaving as expected in MS Edge

[Floriferous]

Bug Report

This React code here does not work on MS Edge, but does work on other browsers I tested (Chrome, Safari, Firefox):

class App extends Component {
  state = { counter: 0 };

  handleClick = () => {
    this.setState({ counter: this.state.counter + 1 }, () => {
      console.log(this); // checkState is a function instead of arrow function in MS Edge,
      // leading to incorrect context, and crash when checking this
      this.checkState();
    });
  };

  checkState = (stuff = true) => {
    const { counter } = this.state;
    console.log('stuff', stuff);
    console.log('counter', counter);
  };

  render() {
    const { counter } = this.state;

    return (
      <div className="App">
        <button onClick={this.handleClick}>Click me {counter}</button>
      </div>
    );
  }
}

Here's a reproduction in a meteor app: https://github.com/Floriferous/ms-edge-arrow-default-param

Here's the .babelrc:

{
  "presets": ["meteor", "@babel/preset-flow"],
  "plugins": [
    ["@babel/plugin-proposal-class-properties"]
  ]
}

The checkState arrow function is transformed into a function, because of the unsupported default param (I guess). And so this is not defined when checkState is called in the callback.

• Babel version(s): [ v7.1.0]
• Node/npm version: [Node 8/npm 5]
• OS: [OSX 10.13.6]
• Monorepo [e.g. yes]
• How you are using Babel: [Not sure]

[babel-bot]

Hey @Floriferous! 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.

[nicolo-ribaudo]

I don't have MS Edge so I can't reproduce it, but

1. What error are you seeing in edge?
2. What is the output that Babel generates for that code?

[tducasse]

Just encountered the same problem on Edge 17 (seemed to work on 18).
Basically says that this is undefined.

Writing a function like this:

class MyComponent extends React.Component {
  myFunc = (param = 'myValue') => {
    console.log(this); // undefined in Edge 17
    [...]
  }
}

transpiles to a normal function instead of an arrow function

function () {
  let param = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  [...]
}

[nicolo-ribaudo]

Could you post the full output for this code?

class MyComponent extends React.Component {
  myFunc = (param = 'myValue') => {
    console.log(this); // undefined in Edge 17
  }
}

I get this correct output:

class MyComponent extends React.Component {
  constructor() {
    var _this;

    super(...arguments);
    _this = this;

    _defineProperty(this, "myFunc", function () {
      let param = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'myValue';
      console.log(_this); // undefined in Edge 17
    });
  }

}

[loganfsmyth]

Is this potentially fixed in #8019? It could be the same issue where _this = super() ends up setting _this to undefined.

[tducasse]

This is what I get:

class MyComponent extends React.Component {
  constructor() {
    var _this;

    _this = super(...arguments);;

    _defineProperty(this, "myFunc", function () {
      let param = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'myValue';
      console.log(_this); // undefined in Edge 17
    });
  }
}

[nicolo-ribaudo]

Which version are you using? It should be fixed by #8019, as Logan mentioned. (d305419, v7.2.2)

[tducasse]

I am not entirely sure since I use Meteor v1.8...

[nicolo-ribaudo]

You can check it by running npx nls why @babel/traverse.

[tducasse]

Thanks!
Everything seems to be using 7.2.3, except this one: babel-eslint > @babel/traverse@7.0.0-beta.44.

[nicolo-ribaudo]

That shouldn't affect it 🤔
Would you be able to create a repository which shows the issue? In the OP's example it's because the package-lock.json specifies Babel v7.1.0.

[nicolo-ribaudo]

@tducasse Is this still an issue?

[tducasse]

I have solved my problem by simply removing the arrow function that was causing it. Not sure it's still a problem, so feel free to close the issue 👍
(Sorry for not being able to create a repo to show the issue)

[nicolo-ribaudo]

Ok, I'm closing this since it should be fixed by #8019 👍
Probably for some reason Babel was picking up an old version of @babel/traverse in your project.