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

[Methuselah96]

C:\projects\path\to\code\ReduxDevTools.jsx
  6:40  error  Missing file extension for "../utilities/cookies"  import/extensions

This is the same error I was getting on 2.19.1 (as seen in #1558). The error does not appear in 2.18.3.

[thewilkybarkid]

We're seeing Missing file extension "ts" for ... moving from 2.18.2 to 2.20.0 (refs libero/article-store#174).

[denisinvader]

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

[thewilkybarkid]

@denisinvader No luck unfortunately (plugin:import/typescript should still be working anyway).

[maclockard]

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"
      }
    ],

[denisinvader]

@maclockard It seems like settings['import/extensions'] doesn't work (or logic has changed) after 2.18 and you should use correct import/resolver config.

Do you use typescript resolver?

I had to update config after the package upgrade and add the resolver for webpack but now my linter works much better and can understand aliased imports like @/components/...

Unfortunately, I have zero experience in typescript so my suggestions are more assumptions

[Methuselah96]

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

[thewilkybarkid]

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

[Methuselah96]

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

[ljharb]

The airbnb config doesn't include typescript extensions, so yes, you need to override both.

[thewilkybarkid]

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

[thewilkybarkid]

Tested locally and that works, so opened #1637.

[javierguzman]

Hello @thewilkybarkid ! Is your change already in the codebase? I see it was committed however I still get this error. I use "eslint-plugin-import": "^2.20.1"

[thewilkybarkid]

@javierguzman It was closed rather than committed (see #1637 (review)). For my case I'm switching to using eslint-config-airbnb-typescript rather than eslint-config-airbnb-base directly.

[javierguzman]

@thewilkybarkid Thanks! I will keep that package in mind, I think for now I will stick with specifying the never rule thing mentioned above...

[thinh105]

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'],
      },
    },
  },

[lvdang]

@Methuselah96 - are you still having this issue for 2.22.0? I am still seeing issue.

[Methuselah96]

@lvdang No, I posted the solution above: #1615 (comment).

[nyngwang]

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

[gdibble]

For those using .eslintrc.yml, this [alone] worked for me (derived from @Methuselah96's post above)

rules:
  # js/ts file extensions
  import/extensions: ["error", "ignorePackages", {js: "never", mjs: "never", jsx: "never", ts: "never", tsx: "never"}]