babel: Bug: Accessing this inside async/await returns undefined
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 |
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 3
- Comments: 15 (7 by maintainers)
I have the same problem. With async/await console.log(this) inside arrow function outputs undefined