Bug: Accessing this inside async/await returns undefined

[adeelshahid]

same as the issue #2765

const LockIcon = styled.img.attrs({
  src: loginImg,
})``

class Login extends React.Component {
  async onLogin() {
    console.log('this', this)
    try {
      const result = await Database.login()
    } catch (err) {
      console.log('err', err)
    }
  }

  render() {
    return isEmpty(this.props.user) ? <LockIcon onClick={this.onLogin} /> : null
  }
}

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

  "presets": [
    [
      "env",
      {
        "modules": false,
        "loose": true,
        "targets": {
          "uglify": true
        }
      }
    ],
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-object-rest-spread",
    "transform-function-bind",
    "transform-class-properties",
    "transform-decorators-legacy",
    "transform-runtime"
  ]
}

{
  "your": { "config": "here" }
}

Expected Behavior

This should point to Class instance. Even using onLogin = async () => {} returns undefined.

Current Behavior

It returns undefined. Async functions should not change this context.

software	version(s)
Babel	6.26.0
node	8.7.0
npm	4.6.1
Operating System	Mac OSX High Sierra

[babel-bot]

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

[loganfsmyth]

Your example is expected to fail, but the onLogin = async () => {} you mentioned should work. Are you sure it failed?

[Andarist]

I've checked that this doesn't work with non-arrow functions, can be verified here

[loganfsmyth]

@Andarist If it's not an arrow function then that's expected. If it's an arrow it gets turned into console.log('this', _this); though which should work fine.

[Andarist]

@loganfsmyth Non-arrow functions works though too, this is not rewritten but as the function gets attached to the instance (with defineProperty) it points to the instance. I guessed that async should behave the same.

Example

[loganfsmyth]

@Andarist The code sample in the issue is <LockIcon onClick={this.onLogin} /> so it'll call onLogin with no context, which means binding is a requirement for it to work for the given usecase.

[Andarist]

You are right, I've misread async's output and the this there points to the instance too.

[yakovenkoroman1993]

I have the same problem. With async/await console.log(this) inside arrow function outputs undefined

[eldyvoon]

+1, doesn't work with react? I've this config in .babelrc

["transform-runtime", { "polyfill": false, "regenerator": true }]

[adeelshahid]

@loganfsmyth @Andarist the process below works. If this solution looks good to you guys we can close this bug.

@eldyvoon

try the following process,

1. Bind async function inside the constructor.
2. Write async function as a normal function.

Example

constructor(props) {
  super(props)
  this.asyncFunc = this.asyncFunc.bind(this)
}

async function asyncFunc() {
  try {
    const result = await window.fetch(...)
  } catch (e) {}
}

[eldyvoon]

@adeelshahid why can't I use arrow function? handleChange = async (e) => {}

[adeelshahid]

@eldyvoon babel transpilation does not correctly handle this reference when using bind and async together. Therefore I offered a workaround.

[Jessidhia]

This was a bug with react-hot-loader@3; it should be fixed with react-hot-loader@4.

[yakovenkoroman1993]

This issue is not reproduced in react-hot-loader 4. I checked it.

[eldyvoon]

@yakovenkoroman1993 if you don't mind, just use arrow function in jsx and do async urFunc() { console.log(this) } it will work.