TypeError: Cannot read property 'name' of undefined at require-default-props.js:291:23

[jwarykowski]

Overview

Seen another instance of the Cannot read property 'name' issue which has already been raised in issue #1021. Again using the following package versions:

• eslint-config-airbnb@14.0.0
• eslint-plugin-react@6.9.0

Error returned is:

Cannot read property 'name' of undefined
TypeError: Cannot read property 'name' of undefined
    at isPropTypeAnnotation (/Users/user/path/org/project/node_modules/eslint-plugin-react/lib/rules/require-default-props.js:291:23)
    at Object.ClassProperty (/Users/user/path/org/project/node_modules/eslint-plugin-react/lib/rules/require-default-props.js:461:13)

After checking require-default-props.js its failing at this point:

function isPropTypeAnnotation(node) {
  return (node.key.name === 'props' && !!node.typeAnnotation);
}

After inspecting the node I have the following returned:

Node {
  type: 'ClassProperty',
  start: 301,
  end: 414,
  loc: 
   SourceLocation {
     start: Position { line: 11, column: 2 },
     end: Position { line: 15, column: 3 } },
  computed: false,
  variance: null,
  static: true,
  value: 
   Node {
     type: 'ObjectExpression',
     start: 320,
     end: 414,
     loc: SourceLocation { start: [Object], end: [Object] },
     properties: [ [Object], [Object], [Object] ],
     range: [ 320, 414 ],
     _babelType: 'ObjectExpression' },
  range: [ 301, 414 ],
  _babelType: 'ClassProperty',
  parent: 
   Node {
     type: 'ClassBody',
     start: 296,
     end: 1235,
     loc: SourceLocation { start: [Object], end: [Object] },
     body: [ [Circular], [Object], [Object], [Object] ],
     range: [ 296, 1235 ],
     _babelType: 'ClassBody',
     parent: 
      Node {
        type: 'ClassDeclaration',
        start: 265,
        end: 1235,
        loc: [Object],
        id: [Object],
        superClass: [Object],
        body: [Circular],
        decorators: [Object],
        range: [Object],
        _babelType: 'ClassDeclaration',
        parent: [Object] } } }

After inspecting then source in question returned from context.getFilename() and checking the line number, I have the following code:

export default class Anchor extends Component {
  static propTypes = {
    active: PropTypes.bool,
    underline: PropTypes.bool,
    tooltip: PropTypes.array,
 }
 ...
}

After checking the source comments here this all appears to be valid.

As you can see in the above node output there is no key property? Has there been a breaking change here? Any insight would be greatly appreciated.

[yannickcr]

Seems you're using babel-eslint v5.x.x. It does not expose key on ClassProperty and we have to rely on another method to get it (using tokens).

I've fixed the rule to use the tokens as fallback to get the key (the fix should be published in the next release this week)

[jwarykowski]

@yannickcr thanks for the quick response on this issue. I've checked my babel-eslint version and I'm using version "babel-eslint": "6.0.4". However, the fix to fallback to get the key sounds great, thanks again for looking into this.

[jwarykowski]

@yannickcr just to note I applied the patch locally and I'm no longer able to replicate the issue 🌟 I look forward to your release this week 💃