Using autobind entire class with react-transform-catch-errors leads to this.props undefined in render() method

[repairearth]

Here is the example

import React from 'react'
import {autobind} from 'core-decorators'

@autobind
export default class Test extends React.Component {
    handleClick() {

    }​

    render() {
        console.log(this.props) // here props is undefined
        return (
            <button onClick={this.handleClick}>{this.props.text}</button>
        )
    }
}

Maybe we could add an option to autobind named dontBind
For example,

@autobind({dontBind: {
    'componentDidMount',
    'render'
    ...
}})

[jayphelps]

@weinot I tried to reproduce the issue with exactly the described code but it works as expected for me. Here's the source I used to try to reproduce: https://github.com/jayphelps/core-decorators-issue-56/blob/master/src/index.jsx

Can you double check that this is indeed all the code you needed to reproduce? Are you using any other decorators as well?

Which version of core-decorators and react?

[jayphelps]

Do you have 15 minutes to do a Screenhero session so I can help you debug? I will probably be able to find the issue quickly since I'm intimately familiar with core-decorators internals and how they might interact with react.

[repairearth]

@jayphelps sorry for the later response, no other decorators are used but I use redux, react-redux and react-router in my project, maybe this causes the issue?

following is the version i use
core-decorators: v0.11.0
react: v0.14.7

Here is a demo project
https://github.com/weinot/issue-demo/
The component located in app\modules\account\components\login.jsx

Thank you for your time.

[jayphelps]

@weinot Your demo repo is perfect, I've been looking into it for a couple hours now and I know what the problem is just trying to find a good way to solve it without breaking the other situations.

The reason you're hitting this bug is because the package react-transform-catch-errors, the way it wraps the render() method. That said, they aren't doing anything wrong, in fact a similar issue was reported a while ago and we solved it but this one is just a bit different.

Will report back as soon as I have a solution. In the interim, you can either 1. use @autobind on each method you need bound, instead of binding the whole class or 2. not use react-transform-catch-errors.

😦 Creating a bug-free @autobind is quite hard since JavaScript is so dynamic and there are so many edge cases with inheritance and such.

[repairearth]

@jayphelps 👍 Thanks a lot.

[jayphelps]

@weinot fixed and published as 0.11.2 💃 thanks again for providing the demo repo, was invaluable in reproducing this.

[jayphelps]

For those reading later, this was tough to immediately track down without the real source code including build-pipeline because react-transform-catch-errors and similar projects literally transform your code and inject additional behavior transparently so it's not clear just from looking at the example code that this is happening. If you are experiencing similar issues and want to report them, include any possible transpiling plugins you're using.