ie11 this context transpilation issue

[sakulstra]

Disclaimer: I'm not sure if this issue was better suited at terser-js or an edge issue tracker - posting it here as i faced it on meteor.

We've a react component which helps us caching method results(stripped out the interesting parts):

export class MethodQuery extends React.Component {
  state = {
    loading: true,
    data: null,
    error: null
  };

  fetch = async (forceFetch = false, isNameChanged = false) => {
    const { methodName: name, params, cacheDuration } = this.props;
    const resetState = { loading: true };
    if (isNameChanged) resetState.data = null;
    this.setState(resetState);
    try {
      const data = await methodCached.call({ name, params, cacheDuration, forceFetch });
      this.setState({ loading: false, data });
    } catch (error) {
      this.setState({ error, loading: false });
    }
  };
}

which produces:

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

    _this = super(...arguments);
    this.state = {
      loading: true,
      data: null,
      error: null
    };

    this.fetch = async function () {
      let forceFetch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
      let isNameChanged = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
      const {
        methodName: name,
        params,
        cacheDuration
      } = _this.props;
      const resetState = {
        loading: true
      };
      if (isNameChanged) resetState.data = null;

      _this.setState(resetState);

      try {
        const data = await methodCached.call({
          name,
          params,
          cacheDuration,
          forceFetch
        });

        _this.setState({
          loading: false,
          data
        });
      } catch (error) {
        _this.setState({
          error,
          loading: false
        });
      }
    };
}

On ie edge 16/17 this somehow leads to "this" not being defined inside fetch - on chrome it works.

With the following diff

- fetch = async (forceFetch = false, isNameChanged = false) => {
+ fetch = async (forceFetch, isNameChanged) => {

a slightly different code is generated which works on ieEdge

class MethodQuery extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      loading: true,
      data: null,
      error: null
    };

    this.fetch = async (forceFetch, isNameChanged) => {
      const {
        methodName: name,
        params,
        cacheDuration
      } = this.props;
      const resetState = {
        loading: true
      };
      if (isNameChanged) resetState.data = null;
      this.setState(resetState);

      try {
        const data = await methodCached.call({
          name,
          params,
          cacheDuration,
          forceFetch
        });
        this.setState({
          loading: false,
          data
        });
      } catch (error) {
        this.setState({
          error,
          loading: false
        });
      }
    };

}

---

Facing this issue in meteor 1.8.0

[kzc]

Disclaimer: I'm not sure if this issue was better suited at terser-js or an edge issue tracker - posting it here as i faced it on meteor.
...
On ie edge 16/17 this somehow leads to "this" not being defined inside fetch - on chrome it works.

On its face, if the same generated code works in one browser but not another, then it's a browser bug that should be reported to the browser project with the failure. If minification is disabled the same error would likely occur in Edge.

It's possible that the Typescript compiler (or Babel 7?) is playing a role in this failure. The input provided in the first code fragment is not ECMAScript, but Typescript:

export class MethodQuery extends React.Component {
state = {

Class properties are not supported in the ES spec, nor by Terser.

[sakulstra]

@kzc looked at the bug trackers of these projects and couldn't find sth fitting which get's me thinking it's a more meteor related issue (just assuming i'm not the first one facing the issue). Anyhow i'll report it there as well 👍.

It's possible that the Typescript compiler (or Babel 7?) is playing a role in this failure. The input provided in the first code fragment is not ECMAScript, but Typescript:

We don't use typescript in that project and while i'm definitely no babel expert I'm pretty sure class properties are supported as babel proposal since quite some time within meteor without the need to adjust the usual meteor babel config(never used meteor without them and never installed the class property proposal manually as far as i can remember).

[kzc]

This is the root cause of the problem: babel/babel#9020

[edurenye]

They just fixed it on the version Babel 7.2.1

[sakulstra]

as @edurenye sais - it's fixed with babel 7.2.1