no-typos rule crashes

[lukeapage]

I get this exception when enabling the rule

TypeError: Cannot read property 'type' of undefined
  at looksLikeExport (c:\project\node_modules\eslint\lib\util\source-code.js:78:19)
  at SourceCode.getJSDocComment (c:\project\node_modules\eslint\lib\util\source-code.js:311:21)
  at Object.isExplicitComponent (c:\project\node_modules\eslint-plugin-react\lib\util\Components.js:218:34)
  at Object.isES6Component (c:\project\node_modules\eslint-plugin-react\lib\util\Components.js:201:17)
  at Linter.MemberExpression (c:\project\node_modules\eslint-plugin-react\lib\rules\no-typos.js:73:18)
  at emitOne (events.js:101:20)
  at Linter.emit (events.js:188:7)
  at NodeEventGenerator.applySelector (c:\project\node_modules\eslint\lib\util\node-event-generator.js:265:26)
  at NodeEventGenerator.applySelectors (c:\project\node_modules\eslint\lib\util\node-event-generator.js:294:22)
  at NodeEventGenerator.enterNode (c:\project\node_modules\eslint\lib\util\node-event-generator.js:308:14)
  at CodePathAnalyzer.enterNode (c:\project\node_modules\eslint\lib\code-path-analysis\code-path-analyzer.js:602:23)
  at Traverser.enter (c:\project\node_modules\eslint\lib\linter.js:925:36)
  at Traverser.__execute (c:\project\node_modules\estraverse\estraverse.js:397:31)
  at Traverser.traverse (c:\project\node_modules\estraverse\estraverse.js:501:28)
  at Traverser.traverse (c:\project\node_modules\eslint\lib\util\traverser.js:31:22)
  at Linter.verify (c:\project\node_modules\eslint\lib\linter.js:922:28)
  at Linter.verifyAndFix (c:\project\node_modules\eslint\lib\linter.js:1228:29)
  at processText (c:\project\node_modules\eslint\lib\cli-engine.js:196:34)
  at processFile (c:\project\node_modules\eslint\lib\cli-engine.js:245:18)
  at executeOnFile (c:\project\node_modules\eslint\lib\cli-engine.js:585:25)
  at fileList.forEach.fileInfo (c:\project\node_modules\eslint\lib\cli-engine.js:622:13)
  at Array.forEach (native)
  at CLIEngine.executeOnFiles (c:\project\node_modules\eslint\lib\cli-engine.js:621:18)
  at Object.<anonymous> (c:\project\node_modules\grunt-eslint\tasks\eslint.js:29:20)
  at Object.<anonymous> (c:\project\node_modules\grunt\lib\grunt\task.js:255:15)
  at Object.thisTask.fn (c:\project\node_modules\grunt\lib\grunt\task.js:73:16)
  at Object.<anonymous> (c:\project\node_modules\grunt\lib\util\task.js:294:30)
  at Task.runTaskFn (c:\project\node_modules\grunt\lib\util\task.js:244:24)
  at Task.<anonymous> (c:\project\node_modules\grunt\lib\util\task.js:293:12)
  at Task.start (c:\project\node_modules\grunt\lib\util\task.js:302:5)
  at Object.grunt.tasks (c:\project\node_modules\grunt\lib\grunt.js:155:8)
  at Object.module.exports [as cli] (c:\project\node_modules\grunt\lib\grunt\cli.js:27:9)
  at Object.<anonymous> (C:\npmprefix\node_modules\grunt-cli\bin\grunt:44:20)
  at Module._compile (module.js:570:32)
  at Object.Module._extensions..js (module.js:579:10)
  at Module.load (module.js:487:32)
  at tryModuleLoad (module.js:446:12)
  at Function.Module._load (module.js:438:3)
  at Module.runMain (module.js:604:10)
  at run (bootstrap_node.js:394:7)
  at startup (bootstrap_node.js:149:9)
  at bootstrap_node.js:509:3

Will try and track down some code that reproduces

[lukeapage]

reduced repro-code:

export function subscribeBatch({ b }) {
    return a.bind(b);
}

/**
 * abc
 */
function a() {
}

[jseminck]

The code is failing on this line of code in eslint-plugin-react:

const comment = sourceCode.getJSDocComment(node);

Is it perhaps an eslint issue, considering the stack trace?

TypeError: Cannot read property 'type' of undefined
  at looksLikeExport (c:\project\node_modules\eslint\lib\util\source-code.js:78:19)
  at SourceCode.getJSDocComment (c:\project\node_modules\eslint\lib\util\source-code.js:311:21)
  at Object.isExplicitComponent (c:\project\node_modules\eslint-plugin-react\lib\util\Components.js:218:34)

[lukeapage]

I guess it depends if the node is valid - thats why I thought to start here.

[jseminck]

Yeah, this is definitely the right place to start!

I'll try to look into this a bit further, hopefully today. I currently don't understand how your code even triggers the rule 😅, as it's only triggered on ClassProperty, MemberExpression, and MethodDefinition node types. And your example code doesn't contain any of these.

Edit:

The rule triggers from: a.bind(b); which is a MemberExpression.

Then we try to find the relatedComponent

      MemberExpression: function(node) {
        const relatedComponent = utils.getRelatedComponent(node);

The related component is the whole FunctionDeclaration:

function* subscribeBatch({ b }) {
    yield a.bind(b);
}

This gets passed into the eslint function sourceCode.getJSDocComment(node); which causes the code to crash.

I'll dig into the ESLint code a bit later and see if it's an issue on their side and raise it there (if needed).

[jseminck]

I created an issue on the eslint repo. Let's see if they have anything to say about it, but to me it looks like the proper fix should be inside eslint.

[ljharb]

Fixed in #1372.

[jseminck]

@yannickcr @ljharb I still ran into another crash with the rule. Trying to figure out why/how...

What do you think about writing the Components.isExplicitComponent as below? I think it may miss some cases because the comment cannot be retrieved from eslint... but probably it should be fine? At least, it's better than crashing...

I honestly don't really understand what it is actually doing here anyway. Why do we need to parse JSDocComments to figure out if anything is a component?

    isExplicitComponent: function(node) {
      let comment;
      try {
          comment = sourceCode.getJSDocComment(node);
      } catch (e) {
          comment = null;
      }

[ljharb]

If someone is using inheritance (a hugely bad antipattern), like class Foo extends BaseComponent {, a jsdoc comment can be used to "trick" eslint-plugin-react into thinking it extends React.Component.