[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.

[k8adev]

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.