eslint-plugin-import: [import/extensions] 2.20.0 still shows errors for importing TS files from JS files without an extension

Nevermind, this is working correctly for when I set this in the rules:

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

and set this in the settings:

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

I believe in 2.18.3 it wasn’t reporting errors that it should have been reporting based on my config (I was not overriding the default import/extensions that is used in airbnb which only allows for normal JavaScript files).

Nevermind, this is working correctly for when I set this in the rules:

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

and set this in the settings:

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

I believe in 2.18.3 it wasn’t reporting errors that it should have been reporting based on my config (I was not overriding the default import/extensions that is used in airbnb which only allows for normal JavaScript files).

I got the same problem with .vue file and it took me a whole day, read every single thread about these 2 rules (import/extensions and import/no-unresolved), and still got errors.

after trying your setting, it works like a charm, and I still have no idea why 😐

here are my .eslintrc.js file

rules: {
 //...
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        mjs: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
        vue: 'never',
      },
    ],
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.vue'],
      },
    },
  },

I had the same problem with .vue files. I missed this extension in import/resolver settings.

This fixed it for me:

  settings: {
    'import/resolver': {
      node: {
        extensions: ['.mjs', '.js', '.json', '.vue'],
      },
    },
  },

Try to replace .vue with .ts

@Methuselah96: No, i doesn’t work for me:

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

still got the error:

Missing file extension for "@/components/App" [import/extensions]

plugin:import/typescript seems to cover settings; could rules be added there too to cover it?

@javierguzman It was closed rather than committed (see https://github.com/benmosher/eslint-plugin-import/pull/1637#pullrequestreview-351678384). For my case I’m switching to using eslint-config-airbnb-typescript rather than eslint-config-airbnb-base directly.

Tested locally and that works, so opened https://github.com/benmosher/eslint-plugin-import/pull/1637.

@thewilkybarkid I think you still need to override import/extensions in the rules section, not just the settings section. I don’t know if that’s intentional or not.

To clarify, when using airbnb-base and plugin:import/typescript you still need to include the import/extensions rule yourself?

I’m also getting this error when importing .ts files in typescript as well.

Even explicitly changing the settings in my .eslitntrc to include .ts still results in an error:

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

or setting the rule directly to:

    "import/extensions": [
      "error",
      "always",
      {
        "ts": "never",
        "tsx": "never",
        "js": "never",
        "jsx": "never"
      }
    ],

We’re seeing Missing file extension "ts" for ... moving from 2.18.2 to 2.20.0 (refs https://github.com/libero/article-store/pull/174).