CODEWITHSUNDEEP
node.jstypescripteslint
Nolat
Nolat

Reputation: 2201

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

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.

Upvotes: 207

Views: 214669

Answers (13)

Sarath Babu
Sarath Babu

Reputation: 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: {}
      }
    }
  },
];

Upvotes: 0

Sabbir Ahmed
Sabbir Ahmed

Reputation: 1704

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:

  1. 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
        }
    }
}
  1. 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:

Upvotes: 0

duhaime
duhaime

Reputation: 27574

I bumped into this because I was doing:

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

I needed to do:

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

Upvotes: 2

Cross
Cross

Reputation: 796

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.

Upvotes: 0

Raphael
Raphael

Reputation: 552

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/

Upvotes: 0

Hyoretsu
Hyoretsu

Reputation: 21

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.

Upvotes: 0

dragomirik
dragomirik

Reputation: 780

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

Upvotes: 31

Pawara Siriwardhane
Pawara Siriwardhane

Reputation: 2055

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

enter image description here

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.

Upvotes: 3

Ryan Wheale
Ryan Wheale

Reputation: 28380

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

Upvotes: 183

Yauheni Saladukha
Yauheni Saladukha

Reputation: 147

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

Upvotes: 13

jfunk
jfunk

Reputation: 8122

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!

Upvotes: 3

nishi
nishi

Reputation: 550

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

Upvotes: 5

superoryco
superoryco

Reputation: 3811

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.

Upvotes: 374

Related Questions