Eslint-plugin-import: [import/extensions] Missing file extension after upgrade to v2.19.1

[raymondsze]

here is the configuration

{
  "extends": ["airbnb", "prettier", "prettier/react"],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "env": { "jest": true, "browser": true },
  "parserOptions": {
    "project": "tsconfig.eslint.json",
    "sourceType": "module"
  },
  "rules": {
    "react/jsx-props-no-spreading": "off",
    "react/prop-types": 0,
    "import/prefer-default-export": "off",
    "import/no-default-export": "error",
    "import/no-unresolved": 0,
    "no-underscore-dangle": ["error", { "allow": ["__typename"] }],
    "@typescript-eslint/no-unused-vars": [2, { "args": "none" }],
    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
    "import/extensions": ["error", "ignorePackages", {
      "ts": "never",
      "tsx": "never",
      "js": "never",
      "jsx": "never",
      "mjs": "never"
    }]
  }
}

All import syntax (for ts and tsx files) got this kind of error

error  Missing file extension for "./Query"                import/extensions

This does not happen for v2.18.2.

[ljharb]

What file does ./Query map to?

[raymondsze]

@ljharb Query.ts

[ljharb]

You also need to configure https://github.com/benmosher/eslint-plugin-import#importextensions so that the plugin knows how to resolve ts extensions. This is a bugfix in the latest release.

[raymondsze]

it does not work even I added it.
my file right now
.eslintrc.json

{
  "extends": ["airbnb", "prettier", "prettier/react"],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "env": { "jest": true, "browser": true },
  "parserOptions": {
    "project": "tsconfig.eslint.json",
    "sourceType": "module"
  },
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx", ".mjs"]
  },
  "rules": {
    "react/jsx-props-no-spreading": "off",
    "react/prop-types": 0,
    "import/prefer-default-export": "off",
    "import/no-default-export": "error",
    "import/no-unresolved": 0,
    "no-underscore-dangle": ["error", { "allow": ["__typename"] }],
    "@typescript-eslint/no-unused-vars": [2, { "args": "none" }],
    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
    "import/extensions": ["error", "ignorePackages", {
      "js": "never",
      "jsx": "never",
      "ts": "never",
      "tsx": "never",
      "mjs": "never"
    }]
  }
}

[raymondsze]

@ljharb
I found that my error looks like this
error Missing file extension for "./Query"
but not
error Missing file extension "ts" for "./Query"

but the Query file is a ts file...
added "": "never" solve the issue, but seems not make any sense...

[ljharb]

That seems very strange.

[keitoliveira]

I got this error after upgrade too 😞

[ljharb]

Are you using the typescript resolver?

[garyking]

I get the error, even with the following settings:

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

[raymondsze]

I found out the reason now. I am using ~ as alias of src folder in tsconfig path setting.
I changed the eslintrc.json to eslintrc.js and modify the resolver like the following, it works now.

const path = require('path');

module.exports = {
  extends: ['airbnb', 'prettier', 'prettier/react'],
  plugins: ['@typescript-eslint'],
  parser: '@typescript-eslint/parser',
  env: { jest: true, browser: true },
  parserOptions: {
    project: 'tsconfig.eslint.json',
    sourceType: 'module',
  },
  settings: {
    'import/resolver': {
+      webpack: {
+        config: {
+          resolve: {
+            alias: {
+              '~': path.join(__dirname, 'src/app'),
+            },
+            extensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs'],
+          },
+        },
+      },
    },
  },
  rules: {
    'react/jsx-props-no-spreading': 'off',
    'react/prop-types': 0,
    'import/prefer-default-export': 'off',
    'import/no-default-export': 'error',
    'import/no-unresolved': 0,
    'no-underscore-dangle': ['error', { allow: ['__typename'] }],
    '@typescript-eslint/no-unused-vars': [2, { args: 'none' }],
    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.jsx'] }],
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
        mjs: 'never',
      },
    ],
  },
};

Instead of webpack environment.
I think https://www.npmjs.com/package/eslint-import-resolver-alias could do the same trick for node environment.

[ljharb]

Glad you figured it out!

[geiszla]

I have the same problem and I'm not using any alias in the path. I have these settings in .eslintrc:

"settings": {
    "import/extensions": [".js",".jsx",".ts",".tsx"],
    "import/parsers": {
        "@typescript-eslint/parser": [".ts",".tsx"]
    },
    "import/resolver": {
        "node": {
            "extensions": [".js",".jsx",".ts",".tsx"]
        }
    }
},

Edit: For anyone looking for the answer, here's the latest conversation about the issue: https://github.com/benmosher/eslint-plugin-import/issues/1615

[ivanbanov]

@raymondsze thank you very much for this https://github.com/benmosher/eslint-plugin-import/issues/1573#issuecomment-565973643

@ljharb the same error was happening to me but only on sublime/vscode, in the terminal the plugin was not notifying anything

Seems like the resolver is not working properly only on IDEs since this commit https://github.com/benmosher/eslint-plugin-import/commit/982493d03acb30a05f46a9d41c31cf85f9acf4cb

[ljharb]

hm, i would not expect IDEs to use a query string in their paths (unless that was in the actual source)

[ivanbanov]

hey @ljharb I debugged it a bit more on my local env and in the end I found that the error is showing up because of some standardx problem on IDEs.

In the resolve package used by eslint-import-resolve-node (more specifically in this line https://github.com/browserify/resolve/blob/master/lib/sync.js#L84) it does not get the correct absolute path to resolve 🤷🏻‍♂️

Just like I mentioned before, the strange part is that in the terminal it works, but on vscode and sublime it reports the error

So seems like everything is 💯 on the eslint end

:)

[nickzylstra]

For anyone else who ends up here and doesn't find a fix - did you recently rename a file or directory by only changing the casing? Did you NOT use git mv to do it? Are you on a case insensitive file system like Mac OS? If so, for me it caused ESLint to say no problem in VS Code and zsh locally, but when run in Teamcity it failed with to missing extension and can't resolve path lints.

Rename your case sensitive files and directories this way:
https://stackoverflow.com/questions/11183788/in-a-git-repository-how-to-properly-rename-a-directory