Image with expanded props throws `The prop must be a JSXAttribute collected by the AST parser.`

Hi, I have this wrapper around an image:

export default class MaybeImage extends React.Component {
  state = {
    error: false,
  }

  handleError = e => this.setState({ error: true })

  render() {
    const { alt, src, ...props } = this.props
    return !src || this.state.error ? (
      <span {...props}>{alt}</span>
    ) : (
      <img src={src} alt={alt} onError={this.handleError} {...props} />
    )
  }
}

But it breaks eslint with an error: The prop must be a JSXAttribute collected by the AST parser. It’s not just an eslint error, rather unhandled javascript exception. I think #7 might be related, but even when I disable the rule, it still breaks.

This line in jsx-ast-utils gets the prop name, but it doesn’t count with spread operator. This is the content of prop which throws an error:

   Node {
     type: 'JSXSpreadAttribute',
     argument:
      Node {
        type: 'Identifier',
        name: 'props',
        _babelType: 'Identifier',
     },
     _babelType: 'JSXSpreadAttribute',
     parent:
      Node {
        type: 'JSXOpeningElement',
        attributes: [Array],
        name: [Node],
        selfClosing: true,
        _babelType: 'JSXOpeningElement',
      } }

What’s your suggestion here? Pass props explicitely so it can be statically analyzed? Or is it bug in jsx-ast-utils? I think it should show an eslint error or warning at best, but not throw an exception.

Cheers 👋

[jessebeach]

Ok, looking into it.

[tricoder42]

@jessebeach Nice! Thank you. Here’s the PR #460 with test case and possible fix.