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

@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…

I get the error, even with the following settings:

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

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.

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

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

(Just be aware that airbnb-typescript isn’t actually from airbnb)

@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…

Thanks, worked for me:

'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
        '': 'never'
      }
    ]

To who wants to fu(k the world after debugging:

This is the simplest form:

  "extends": [
    "airbnb",
    "airbnb-typescript"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "rules": {
    "import/extensions": [ "error", "ignorePackages", { "": "never" } ],
  }

the important parts are: "airbnb-typescript", "project": YOUR_CONFIG(with this you will possibly need to update tsconfig.json’s "include" too), "import/extensions": [ "error", "ignorePackages", { "": "never" } ],

I ❤️ airbnbbbbbb.

I landed here with the same error, but the cause turned out to be another one. Because Windows’ and macOS’ file systems are case insensitive, renaming files/directories by just changing their casing is not recognized by Git. Running GitHub Actions on Ubuntu, which has a case sensitive file system, causes eslint to not find the imported files. See my stackoverflow answer for the solution.

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

😃

I got this error after upgrade too 😞

@mrjackyliang native ESM may work for some rules, but this plugin doesn’t fully support it yet.

Try a empty string instead of “error” in your rule. It works for me

I get the error, even with the following settings:

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

I solved it by adding your config plus this one at rules property:

rules: {
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    ...
}    

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.