Eslint-plugin-import: [no-unused-modules] unusedExports false posivitve when import from index.js used by component with .jsx extension

[ferogot]

I created minimal repo https://github.com/ferogot/eslint-plugin-import-bug-reproduction/tree/jsx_extension_problem

.
├── package.json
├── .eslintrc
├── .gitignore
├── eslinttest
│   ├── Component
│   │   ├── Component.jsx
│   │   └── index.js
│   ├── use_default_index
│   │   └── Comp2.jsx
│   └── index.js

files content is:
eslinttest/Component/Components.jsx

import React from 'react';
export function Component(props){
  return (<></>);
}

eslinttest/Component/index.js

export {Component} from './Component';

eslinttest/use_default_index/Comp2.jsx

import React from 'react';
import {Component} from '../Component/index';

function Comp2(props){
  return (<Component />);
}

export default Comp2;

eslinttest/index.js

import React from 'react';
import ReactDom from 'react-dom';
import Comp2 from './use_default_index/Comp2';

ReactDom.render(
  <Comp2 />,
  document.getElementById('root'),
);

And eslint config file:

{
    "env": {
        "browser": true,
        "es2020": true
    },
    "parser": "babel-eslint",
    "extends": [
        "eslint:recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "import"
    ],
    "rules": {
        "no-unused-vars": "off",
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error",
        "import/no-extraneous-dependencies": 2,
        "import/no-unresolved": 1,
        "import/no-unused-modules": [1, {"unusedExports": true}]
    },
    "settings": {
        "import/resolver": {
            "node": {
                "extensions" : [".js", ".jsx"],
                "moduleDirectory": ["node_modules", "src/"]
            }
        },
        "import/parser": "babel-eslint"
    }
}

So when i `eslint ./eslinttest --ext .js,.jsx' i get following:

> eslint ./eslinttest --ext .js,.jsx

/home/stranger/repo/eslint-plugin-import-bug-reproduction/min-app/eslinttest/Component/index.js
  1:1  warning  exported declaration 'Component' not used within other modules  import/no-unused-modules

✖ 1 problem (0 errors, 1 warning)

But if i change Comp2.jsx into Comp2.js i get no warnings anymore!
Thats strange. Is my eslint config right? I added .js and .jsx extensions everywhere which i could.

I need help with this problem, in my project i have same behavior and want add this rule with error level to CI.

[ferogot]

Ah, i forgot about versions. In minimal repo it is:

     "eslint": "^7.3.1",
     "eslint-plugin-import": "^2.21.2"

And i got same problem with:

    "eslint": "^6.8.0",
    "eslint-plugin-import": "^2.21.2"

[ljharb]

If you try with the default branch of this plugin, is the issue already fixed?

[ferogot]

@ljharb i updated plugin to 2.22.0 (it is equal to master branch for now), and issue still reproduce

[oleob]

Is there an update on this? I am currently facing an issue with false positives when exports in .js files are imported into .tsx (and possibly .ts) files, and was wondering if this might be the same as the issue at hand.

Edit:
Turns out I forgot to add extends: ["plugin:import/typescript"] to my eslintrc file 😅

[ljharb]

@ferogot you're missing jsx in https://github.com/benmosher/eslint-plugin-import#importextensions. you can get that for free by extending plugin:import/typescript.

When I edit your repro repo's eslint config to also extend that config, everything works fine. Closing as resolved.