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.

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
– NeoZoom.lua, Commented Mar 26, 2022 at 14:51

Yves M. · Accepted Answer · 2020-02-03 15:42:50Z

379

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 3, 2020 at 15:42

Yves M.

31.3k24 gold badges111 silver badges154 bronze badges

answered Dec 10, 2019 at 13:57

superoryco

3,8611 gold badge15 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Venryx Over a year ago

Worked! Thanks. (other readers: make sure you put it under "rules" not "settings"...)

JulianSoto Over a year ago

but but what does this do?

superoryco Over a year ago

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

Mike Over a year ago

replace "error" with 2.

Steve Over a year ago

This just disables import/extensions entirely. Pointless answer.

|

Ryan Wheale · Accepted Answer · 2022-03-17 22:13:13Z

183

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, 2022 at 22:13

answered May 19, 2021 at 20:13

Ryan Wheale

28.7k11 gold badges87 silver badges105 bronze badges

5 Comments

0xBradock Over a year ago

Thanks! Running npm install -D eslint-config-airbnb-typescript and adding 'airbnb-typescript' fixed for me.

Ricardo Rodriguez Over a year ago

This should be the accepted answer. Thanks for taking the time to update your original answer

Nam Lee Over a year ago

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: imgur.com/rG8Zkzx

cyrf Over a year ago

What if I have one eslintrc.js file in a monorepo, where some packages have react and some do not?

Ryan Wheale Over a year ago

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

dragomirik · Accepted Answer · 2022-06-16 09:47:44Z

32

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, 2022 at 9:47

dragomirik

7902 gold badges7 silver badges16 bronze badges

6 Comments

Hazy Over a year ago

Strangely enough this was the only solution that worked for me. Does anyone know why the empty quote marks are needed?

dragomirik Over a year ago

@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. github.com/import-js/eslint-plugin-import/issues/… – here is the guy who found this solution. Seems, he has no answer as well, but he described how he came to it.

klaucode Over a year ago

in my case, it also helped

Steffen Over a year ago

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

Ilja KO Over a year ago

Why is it working like that?

|

Fotios Tsakiris · Accepted Answer · 2021-10-16 11:15:17Z

13

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

edited Oct 16, 2021 at 11:15

Fotios Tsakiris

1,6111 gold badge24 silver badges32 bronze badges

answered Aug 10, 2021 at 7:06

Yauheni Saladukha

1471 silver badge4 bronze badges

Comments

nishi · Accepted Answer · 2021-07-02 13:52:48Z

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

chenrui · Accepted Answer · 2021-07-12 22:38:31Z

3

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!

edited Jul 12, 2021 at 22:38

chenrui

10k3 gold badges38 silver badges50 bronze badges

answered Jun 28, 2021 at 20:08

jfunk

8,2724 gold badges43 silver badges41 bronze badges

Comments

Pawara Siriwardhane · Accepted Answer · 2022-03-19 11:12:16Z

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.

duhaime · Accepted Answer · 2023-10-09 21:23:39Z

2

I bumped into this because I was doing:

import Ham from "./Ham.tsx"       // bad!

I needed to do:

import Ham from "./Ham"           // good!

answered Oct 9, 2023 at 21:23

duhaime

27.9k22 gold badges196 silver badges243 bronze badges

Comments

Jesse Johnson · Accepted Answer · 2024-10-05 11:45:20Z

1

The following eslint.config.mjs worked for me:

import eslintPluginReact from 'eslint-plugin-react';
import eslintPluginReactHooks from 'eslint-plugin-react-hooks';
import typescriptEslintPlugin from '@typescript-eslint/eslint-plugin';
import typescriptEslintParser from '@typescript-eslint/parser';
import eslintPluginJsxA11y from 'eslint-plugin-jsx-a11y';
import eslintPluginImport from 'eslint-plugin-import';

export default [
  {
    files: ["src/**/*.{ts,tsx,js,jsx}"],
    ignores: [
      "node_modules",
      "build",
      "dist"
    ],
    languageOptions: {
      parser: typescriptEslintParser,
      ecmaVersion: 2021,
      sourceType: "module",
      globals: {
        React: "readonly",
      },
    },
    plugins: {
      react: eslintPluginReact,
      "react-hooks": eslintPluginReactHooks,
      "@typescript-eslint": typescriptEslintPlugin,
      "jsx-a11y": eslintPluginJsxA11y,
      "import": eslintPluginImport,
    },
    rules: {
      "react/react-in-jsx-scope": "off",  // React 17+ doesn't require React in scope
      "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
      "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
      // Correct import/extensions rule setup
      "import/extensions": [
        "error",
        "ignorePackages",
        {
          js: "never",
          jsx: "never",
          ts: "never",
          tsx: "never"
        }
      ],
    },
    // Add the resolver to support TypeScript
    settings: {
      "import/resolver": {
        // Use Node resolver for JavaScript files
        node: {
          extensions: [".js", ".jsx", ".ts", ".tsx"]
        },
        // Use TypeScript resolver for TypeScript files
        typescript: {}
      }
    }
  },
];

edited Oct 5, 2024 at 11:45

Jesse Johnson

1,72617 silver badges29 bronze badges

answered Sep 27, 2024 at 10:37

Sarath Babu

111 bronze badge

2 Comments

Jesse Johnson Over a year ago

Best to provide an explanation of why your solution works. Just providing the solution with no explanation doesn't allow others to learn form the question.

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Hyoretsu · Accepted Answer · 2022-08-17 21:01:07Z

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, 2022 at 21:01

Hyoretsu

212 silver badges2 bronze badges

Comments

Raphael · Accepted Answer · 2023-04-17 21:31:17Z

0

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/

answered Apr 17, 2023 at 21:31

Raphael

5621 gold badge7 silver badges14 bronze badges

Comments

Cross · Accepted Answer · 2023-07-03 09:51:45Z

0

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.

answered Jul 3, 2023 at 9:51

Cross

7961 gold badge11 silver badges26 bronze badges

Comments

Sabbir Ahmed · Accepted Answer · 2024-02-27 09:20:14Z

You could use eslint-import-resolver-typescript plugin to add TypeScript support to an existing eslint-plugin-import plugin in your project by using the following steps:

Install the plugin: npm i -D eslint-import-resolver-typescript

NOTE: Please install eslint-plugin-import and @typescript-eslint/parser if you have not already. These are required for adding .tsx file import support with ESLint and Typescript-ESLint. 2. Add the following value at the "root" of your .eslintrc.json file:

"settings": {
    "import/resolver": {
        "typescript": {
            "alwaysTryTypes": true
        }
    }
}

Turn off the rule for specific extensions:

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

Hopefully that should do the trick.

For further clarification, you can also check out the links below:

Collectives™ on Stack Overflow

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

13 Answers 13

8 Comments

5 Comments

6 Comments

Comments

Comments

Comments

Solution 1:

Solution 2:

Comments

Comments

2 Comments

Comments

.eslintrc

webpack.config.json

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

8 Comments

5 Comments

6 Comments

Comments

Comments

Comments

Solution 1:

Solution 2:

Comments

Comments

2 Comments

Comments

.eslintrc

webpack.config.json

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related