Eslint-plugin-react: eslint doesn't catch some unused imports

[kumarharsh]

When I'm importing a component (say Input) which has other subcomponents as it's properties (like Input.Placeholder, Input.Button, etc), and there is another different component imported by a same name (say Button), and then if I use <Input.Button> in my code then eslint doesn't tell that <Button> is unused.

Reproducible code:

import React from 'react';
import Button from './Button';
import Input from './Input';

export default class X extends React.Component {
  render() {
    return <Input.Button />;
  }
}

What should be expected?

The import Button from './Button'; line should be highlighted with a no-unused-vars error. You can see this if you just use <Input> in the render function instead of <Input.Button>.

[ljharb]

no-unused-vars is a core eslint rule. The use of jsx here shouldn't interfere with it, but if it does, I'd say it might need filing as an issue directly on eslint?

[kumarharsh]

Actually, I was in two minds where to file it, and I tried to reproduce the same with normal javascript, but can't get eslint to show the same behaviour...

For example, eslint does show proper errors in this case:

import Button from './Button';
import Input from './Input';

export function f() {
  return new Input.Button();
}

[lencioni]

This might be related to the jsx-uses-vars rule: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md

[ljharb]

@kumarharsh do you see the same behavior when you enable the react/jsx-uses-vars rule?

[lencioni]

I believe I found the bug. PR coming soon.

[kumarharsh]

@ljharb yes, jsx-uses-vars is already set in eslintconfig. @lencioni's PR seems good :)