async instance methods broken in 6.8.0

[selbekk]

We have a few async functions as instance methods in our component classes. An example is:

class SessionHandler extends Component {
  async ping() {
    try {
      await server.ping();
    } catch(e) { this.props.onLoggedOut(); }
  }
  render() {
     // Render some stuff
  }
}

In #989 you introduced a check for whether a component was async or not. This broke code like this for us - which it shouldn't. Suggest that #989 is removed or rewritten to support this kind of syntax. Worked perfectly on 6.7.1 :)

[ljharb]

Can you elaborate on how it breaks? That change should only have affected component detection on functions.

[selbekk]

Thanks for the lightning fast response there!

Oh sorry, of course. In the async method, the linter now think it is its own component. Therefore, I get linting errors like these:

'selectedCoverage' is missing in props validation  react/prop-types
'quantity' is missing in props validation          react/prop-types

on code like this:

class SomeClass extends Component {
  async onAddToCart({ selectedCoverage, quantity }) {
    // no jsx, just dispatcher calls etc
  }

  render() {
    return <CartWhatever onAddToCart={this.onAddToCart} />
  }
}

[ljharb]

Thanks, that definitely seems like a bug. @taion mind submitting a PR to fix this?

[taion]

Can't reproduce. See test cases added in #992.

[taion]

And in fact the PR should be expected to do the exact opposite, since the only added cases blacklist component detection.

[selbekk]

Thanks for the quick feedback guys :) I'll see if I can reproduce this outside of my application.

[selbekk]

Seems I can't reproduce this either outside of my own code. I'll close this until I have something to contribute.

[bharley]

I'm having the same issue:

class CertSettings extends React.Component {
  static propTypes = {
    onSave: React.PropTypes.func.isRequired,
    errors: React.PropTypes.array,
  };

  handleSubmit = async ({ certificate: certificates, key: keys }) => {
    if (!certificates || !certificates.length || !keys || !keys.length) {
      return;
    }

    const { onSave } = this.props;
    await onSave(crtContents, keyContents);
  };

  // ...
}

Results in the following linting errors:

'certificate' is missing in props validation  react/prop-types
'key' is missing in props validation          react/prop-types

[ljharb]

@bharley does it have the same problem if you don't destructure in the signature?

(on a side note, there's zero reason you need an async function there, since you only have one await and you're not returning anything)

[bharley]

@ljharb: It does not have a problem with that, no.

I trimmed down the function to show the relevant parts. It does look silly though...

You know what, that got me thinking... I played around with the code to it reproduce. This has issues:

export class Example extends React.Component {
  static propTypes = {
    certificates: React.PropTypes.array,
    onSave: React.PropTypes.func.isRequired,
    onDelete: React.PropTypes.func.isRequired,
    deleteFingerprint: React.PropTypes.string.isRequired,
  };

  handleDeleteConfirm = () => {
    const { deleteFingerprint } = this.props;
    this.props.onDelete(deleteFingerprint);
  };

  handleSubmit = async ({ certificate: certificates, key: keys }) => {
    if (!certificates || !certificates.length || !keys || !keys.length) {
      return;
    }

    const { onSave } = this.props;
    await onSave(certificates, keys);
  };
}

but this doesn't

export class Example extends React.Component {
  static propTypes = {
    certificates: React.PropTypes.array,
    onSave: React.PropTypes.func.isRequired,
    onDelete: React.PropTypes.func.isRequired,
    deleteFingerprint: React.PropTypes.string.isRequired,
  };

  handleSubmit = async ({ certificate: certificates, key: keys }) => {
    if (!certificates || !certificates.length || !keys || !keys.length) {
      return;
    }

    const { onSave } = this.props;
    await onSave(certificates, keys);
  };
}