no-unused-prop-types crashes

[elodszopos]

Cannot read property 'name' of undefined
TypeError: Cannot read property 'name' of undefined
    at markPropTypesAsUsed (/Users/elodszopos/x/x/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:582:41)
    at EventEmitter.VariableDeclarator (/Users/elodszopos/x/x/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:840:9)
    at emitOne (events.js:101:20)
    at EventEmitter.emit (events.js:188:7)
    at NodeEventGenerator.enterNode (/Users/elodszopos/xx/node_modules/eslint/lib/util/node-event-generator.js:40:22)
    at CodePathAnalyzer.enterNode (/Users/elodszopos/x/x/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:608:23)
    at CommentEventGenerator.enterNode (/Users/elodszopos/x/x/node_modules/eslint/lib/util/comment-event-generator.js:97:23)
    at Controller.enter (/Users/elodszopos/x/x/node_modules/eslint/lib/eslint.js:898:36)
    at Controller.__execute (/Users/elodszopos/x/x/node_modules/estraverse/estraverse.js:397:31)
    at Controller.traverse (/Users/elodszopos/x/x/node_modules/estraverse/estraverse.js:501:28)

is the stack trace that I get when running
esw -c .eslintrc ./src ./webpack ./test --ext '.js, .jsx' --color -w

Specifically turning
"react/no-unused-prop-types": to 2 causes this.

Turning it to 0 makes it run again fine.

Please let me know if there's anything else that I can provide to help you guys.

Thanks!

[ljharb]

It would help if you could figure out which file it's crashing on, and specifically which section of code.

What not-spec-finalized babel transforms are you using? Are you using flow or TS?

[elodszopos]

No flow, no TS.

{
  "presets": ["react", "es2015", "stage-0"],

  "plugins": [
    "transform-runtime",
    "add-module-exports",
    "transform-decorators-legacy",
    "transform-react-display-name"
  ],

  "env": {
    "development": {
      "plugins": [
        "typecheck",
        ["react-transform", {
            "transforms": [{
                "transform": "react-transform-catch-errors",
                "imports": ["react", "redbox-react"]
              }
            ]
        }]
      ]
    },
    "production": {
      "presets": ["react-optimize"]
    }
  }
}

Above you can find my .babelrc.

Below is the source code file for which it fails (even webstorm gives me an error saying Cannot parse checkstyle XML)

import React, { PropTypes } from 'react';
import FilmStrip from 'components/uniqlo-ui/FilmStrip';

const { object } = PropTypes;

const FilmStripWrapper = (props, context) => {
  const {
    ...other
  } = props;

  return (
    <FilmStrip
      {...other}
      onTouchTap={() => null}
      checkIfWhislisted={() => null}
      wishlistedStyles={{}}
      headingText={context.i18n.pdp.styleBook}
    />
  );
};

FilmStripWrapper.contextTypes = {
  i18n: object,
};

export default FilmStripWrapper;

[elodszopos]

Here's a console.log of node inside markPropTypesAsUsed function of no-unused-prop-types.js @ line ~ 578.

case 'VariableDeclarator':
          for (var i = 0, j = node.id.properties.length; i < j; i++) {
            // let {props: {firstname}} = this
            if (!node.id.properties[i].key) console.log(node);
...

The line that fails:

var thisDestructuring = (
              (node.id.properties[i].key.name === 'props' || node.id.properties[i].key.value === 'props') &&
              node.id.properties[i].value.type === 'ObjectPattern'
            );

Node {
  type: 'VariableDeclarator',
  start: 185,
  end: 211,
  loc: 
   SourceLocation {
     start: Position { line: 7, column: 8 },
     end: Position { line: 9, column: 11 } },
  id: 
   Node {
     type: 'ObjectPattern',
     start: 185,
     end: 203,
     loc: SourceLocation { start: [Object], end: [Object] },
     properties: [ [Object] ],
     range: [ 185, 203 ],
     _babelType: 'ObjectPattern' },
  init: 
   Node {
     type: 'Identifier',
     start: 206,
     end: 211,
     loc: SourceLocation { start: [Object], end: [Object], identifierName: 'props' },
     name: 'props',
     range: [ 206, 211 ],
     _babelType: 'Identifier' },
  range: [ 185, 211 ],
  _babelType: 'VariableDeclarator',
  parent: 
   Node {
     type: 'VariableDeclaration',
     start: 179,
     end: 212,
     loc: SourceLocation { start: [Object], end: [Object] },
     declarations: [ [Circular] ],
     kind: 'const',
     range: [ 179, 212 ],
     _babelType: 'VariableDeclaration',
     parent: 
      Node {
        type: 'BlockStatement',
        start: 175,
        end: 412,
        loc: [Object],
        body: [Object],
        range: [Object],
        _babelType: 'BlockStatement',
        parent: [Object] } } }
Cannot read property 'name' of undefined

[ljharb]

Can you try not destructuring PropTypes.object and see if that fixes it?

[elodszopos]

Even if it does, not sure that'd be a good fix for me. I destruct PropTypes throughout the whole project. I'll give it a go though.

[elodszopos]

@ljharb No longer destructing PropTypes, same error.

[elodszopos]

I found that however removing

  const {
    ...other
  } = props;

fixed it.

Apparently only having other messed it up somehow. I used to have some other props there but since those were removed and only other remained. I'll work around this now. Also, adding anything alongside other fixes it.
ie.

  const {
    foo,
    ...rest
  } = props;

[ljharb]

Thanks - although it's weird to have a rest prop alone, iirc it's valid, so it should work. Thanks for following up!

[elodszopos]

My pleasure. It is indeed valid. Both occurrences (destructed props with only ...other or ...rest) that I had triggered the same failure.