eslint-plugin: Unable to resolve .jsx (import/no-unresolved)

[galloppinggryphon]

Description

When using @wordpress/eslint-plugin, eslint is reporting the following error while trying to resolve .jsx files:

Unable to resolve path to module  './path/jsx-file-sans-extension'. eslint(import/no-unresolved)

Adding the extension to the import statement makes the file resolve. All .js files resolve normally.

Step-by-step reproduction instructions

This import statement cannot be resolved:

//index.js
import { Clock } from './components/clock';

Adding the extension makes it work

import { Clock } from './components/clock.jsx';

ESLint config:

{
  "extends": ["plugin:@wordpress/eslint-plugin/recommended"],
}

Versions

"eslint": "^7.27.0",
"@wordpress/eslint-plugin": "^9.0.6",

Expected behaviour

Both .js and .jsx should resolve.

Actual behaviour

.js files are successfully resolved by eslint while .jsx files are not.

WordPress information

n/a

Workaround

Eslint config that allows extension to be omitted in imports, adapted from eslint-plugin/configs/recommended.js

If typescript is enabled, then similar code will be included in recommended.js:

{
  "extends": ["plugin:@wordpress/eslint-plugin/recommended"],
  "settings": {
      "import/resolver": {
          "node": {
              "extensions": [".js", ".jsx"]
          }
        }
  }
}

[gziolo]

@galloppinggryphon, are you proposing that we add:

"settings": {
      "import/resolver": {
          "node": {
              "extensions": [".js", ".jsx"]
          }
        }
  }

for the case when TypeScript is not installed? Would you mind opening PR with the changes that fix your use case?

[gziolo]

I opened https://github.com/WordPress/gutenberg/pull/33746 with the proposed fix.