Typescript eslint - Missing file extension "ts" import/extensions

Question

I have a simple Node/Express app made with Typescript. And eslint give me the error

Missing file extension "ts" for "./lib/env" import/extensions

Here is my .eslintrc file

    {
  "extends": [
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/react",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier", "import"],
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {
        "directory": "./tsconfig.json"
      },
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "@typescript-eslint/indent": [2, 2],
    "no-console": "off",
    "import/no-unresolved": [2, { "commonjs": true, "amd": true }],
    "import/named": 2,
    "import/namespace": 2,
    "import/default": 2,
    "import/export": 2
  }
}

I have installed eslint-plugin-import & eslint-import-resolver-typescript. And I cannot figure out why, I got that error.

https://github.com/benmosher/eslint-plugin-import/issues/1558 — youwhut, Dec 10 '19 at 11:41
a note for myself: I solve this before. This is problem about `airbnb`, and can be oneliner solved using `"import/extensions": [ "error", "ignorePackages", { "": "never" } ]`. — NeoZoom.lua, Mar 26 '22 at 14:51

score 354 · Accepted Answer · edited Feb 03 '20 at 15:42

354

Add the following code to rules:

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

airbnb ESLint config leads the problem.

edited Feb 03 '20 at 15:42

Yves M.

29,855
23
108
144

answered Dec 10 '19 at 13:57

superoryco

3,603
1
13
4

31

Worked! Thanks. (other readers: make sure you put it under "rules" not "settings"...) – Venryx Jan 02 '20 at 21:41
7

but but what does this do? – JulianSoto May 19 '21 at 04:22
2

@JulianSoto For whom using 'eslint-config-airbnb-base' in there typescript project, there is a rule to 'Ensure consistent use of file extension within the import path', which leads the problem. So we can just overwrite it to fit typescript project. – superoryco May 19 '21 at 16:04
1

with eslint 7.27.0 i get this error `Configuration for rule "import/extensions" is invalid: Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed '"error"')` – Daniel Lizik Jun 02 '21 at 02:07
2

replace "error" with 2. – Mike Sep 26 '21 at 20:57
Eslint does not have such rule. You would need to install https://github.com/import-js/eslint-plugin-import first. – OSGI Java Jan 20 '22 at 19:31
5

This just disables `import/extensions` entirely. Pointless answer. – Steve Apr 25 '22 at 10:44
for me helped only when added `{ "": "never", "ts": "never" }` – Илья Савич Jul 20 '22 at 17:05

Ryan Wheale · Answer 2 · 2022-03-17T22:13:13.717

174

I know this is late, but if you're extending the Airbnb rules you can use eslint-config-airbnb-typescript. Please refer to the project page for the latest instructions. Here's the gist of it as of March 2022:

Install

npm install -D eslint-config-airbnb-typescript

ESLint config file

using React - add 'airbnb-typescript' after 'airbnb'

extends: [
  'airbnb',
+ 'airbnb-typescript'
]

without React - add 'airbnb-typescript/base' after 'airbnb-base'

extends: [
  'airbnb-base',
+ 'airbnb-typescript/base'
]

set parserOptions.project to path of your tsconfig.json

{
  extends: ['airbnb', 'airbnb-typescript'],
+ parserOptions: {
+   project: './tsconfig.json'
+ }
}

NOTE: Prior to August 2021, you would need to also do the following tasks. These instructions are remaining here for historical reference only. You should not need to do this any more.

First uninstall the old one and add the new one:

# uninstall whichever one you're using
npm uninstall eslint-config-airbnb
npm uninstall eslint-config-airbnb-base

# install the typescript one
npm install -D eslint-config-airbnb-typescript

Then update your ESlint config, remove the old Airbnb from the "extends" section and add the new one:

extends: ["airbnb-typescript"]

edited Mar 17 '22 at 22:13

answered May 19 '21 at 20:13

Ryan Wheale

26,022
8
76
96

Thanks! Running `npm install -D eslint-config-airbnb-typescript` and adding `'airbnb-typescript'` fixed for me. – Kmelow Oct 12 '21 at 13:54
2

This should be the accepted answer. Thanks for taking the time to update your original answer – Ricardo Rodriguez Nov 25 '21 at 15:46
npm install eslint-config-airbnb-typescript \ @typescript-eslint/eslint-plugin@^5.13.0 \ @typescript-eslint/parser@^5.0.0 \ --save-dev I can't install the package, got the error: https://imgur.com/rG8Zkzx – Nam Lee May 25 '22 at 00:27
What if I have one eslintrc.js file in a monorepo, where some packages have react and some do not? – cyrf Aug 09 '22 at 17:22
1

@cyrf - monorepos are a whole other game. I generally keep a single eslint file for the entire repo - you should be able to create a single config that works for react and non-react projects. The other approach is to have a one or more "base" configs in your root project and you import/extend those in individual packages in your monorepo. – Ryan Wheale Aug 09 '22 at 18:15

score 20 · Answer 3 · answered Jun 16 '22 at 09:47

20

This is a strange solution, but I've added "": "never" and it worked for me (https://github.com/import-js/eslint-plugin-import/issues/1573).

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

answered Jun 16 '22 at 09:47

dragomirik

612
2
6
13

3

Strangely enough this was the only solution that worked for me. Does anyone know why the empty quote marks are needed? – Hazy Jan 05 '23 at 20:22
@Hazy I can assume that this is a bug in the webpack of one of the packages/extensions, but I don't know the exact answer. https://github.com/import-js/eslint-plugin-import/issues/1573#issuecomment-565973643 – here is the guy who found this solution. Seems, he has no answer as well, but he described how he came to it. – dragomirik Jan 06 '23 at 12:25
in my case, it also helped – klaucode Apr 06 '23 at 20:27
1

If you have this problem in VS Code: `"eslint.workingDirectories": [{ "mode": "auto" }]` to my settings.json fixed the issue for me, without changing the eslint rules – Steffen Jun 27 '23 at 13:59
Why is it working like that? – Ilja KO Jul 25 '23 at 11:51

score 11 · Answer 4 · edited Oct 16 '21 at 11:15

Important to add import extension and parser to .eslintrc

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

Further add to rules:

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



enter code here

score 4 · Answer 5 · answered Jul 02 '21 at 13:52

got this working by bundling all answers I found on internet:

this is the end result for me:

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

  "env": {
    "browser": true,
    "es2021": true
  },

  "extends": ["plugin:react/recommended", "airbnb"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["import", "react", "@typescript-eslint"],
  "rules": {
    "no-console": 1,
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never",
        "mjs": "never"
      }
    ]
  }
}

im using react native btw. if u're using something different just removing react related should be enough

score 3 · Answer 6 · edited Jul 12 '21 at 22:38

If you're like me trying to configure babel, legacy Javascript, and new typescript files and attempting to enable extension free imports on *.ts then I was running into this ESLint issue (where I also found below solution):

In addition to the rules config:

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

You also need an additional settings entry in your .eslintrc.js:

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

Good luck!

Pawara Siriwardhane · Answer 7 · 2022-03-19T11:12:16.733

Following is a similar error that can be thrown due to '~' in imports:

Missing file extension for "~/path/" eslintimport/extensions\

Solution 1:

This issue can be resolved by configuring tsconfig.json and .eslintrc.js as follows.

tsconfig.json

...
“paths”: {
 “~*”: [“./src/*”],
},
...

.eslintrc.js

...
settings: {
  'import/resolver': {
     alias: {
       map: [['~', './src/']],
       extensions: ['.ts', '.js', '.tsx'],
     },
   },
},
...

Solution 2:

If the error still persists, then probably you must have opened the project in another directory other than the root directory (the directory where tsconfig.json and .eslintrc.js are located). Therefore opening the directory other than the root directory can confuse the eslint in identifying the path correctly, and throw the above error.

score 0 · Answer 8 · answered Aug 17 '22 at 21:01

0

In my case, I was extending monorepo ESLint configs, and had airbnb-base loading after the package in which I was disabling that rule. So I just had to load it last.

answered Aug 17 '22 at 21:01

Hyoretsu

21
2
2

score 0 · Answer 9 · answered Apr 17 '23 at 21:31

My issue persisted even with all the typescript properties in my .eslintrc.

.eslintrc

"extends": [
    "airbnb-base",
    "airbnb-typescript/base"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],

I was able to fix the issue by adding this to my webpack config:

webpack.config.json

resolve: {
  extensions: ['.tsx', '.ts', '.js'],
}

Source: https://smartdevpreneur.com/the-three-easiest-ways-to-fix-the-missing-file-extension-tsx-error/

score 0 · Answer 10 · answered Jul 03 '23 at 09:51

for eslint@^8, I just put *.js into the overrides.files, such as:

    ...
    overrides: [
        {
            // files: ['*.ts', '*.mts', '*.cts'],
            files: ['*.ts', '*.mts', '*.cts', '*.js'],
            plugins: [
                //
                'eslint-plugin-tsdoc',
                '@typescript-eslint',
            ],
    ...

the lint error massage around the line which import a js file, Missing file extension "ts" for ".... gone.

Typescript eslint - Missing file extension "ts" import/extensions

10 Answers10

Solution 1:

Solution 2:

.eslintrc

webpack.config.json

Linked