ESLint Definition for rule 'import/extensions' was not found

Question

I'm getting the following two errors on all TypeScript files using ESLint in VS Code:

Definition for rule 'import/extensions' was not found.eslint(import/extensions)
Definition for rule 'import/no-extraneous-dependencies' was not found.eslint(import/no-extraneous-dependencies)

A screenshot from VSC Problems pane:

Note on possible duplicates

There are many similar questions about different modules and even some about the import/extensions, but none of the suggested solutions help. I've tried them all. I also tried every single solution posted in every single thread suggested by Stack Overflow while typing this question.

Here is my .eslintrc.json:

{
  "env": {
      "es2021": true,
      "node": true
  },
  "extends": [
      "airbnb-typescript/base",
      "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
      "ecmaVersion": 12,
      "sourceType": "module",
      "project": "./tsconfig.json"
  },
  "plugins": [
      "@typescript-eslint"
  ],
  "rules": {
      "@typescript-eslint/no-use-before-define": "off"
  }
}

package.json:

{
  "name": "graph-userdata-gateway",
  "version": "1.0.0",
  "description": "Gateway for PowerApps Microsoft Graph API custom connector to query user data with application permissions.",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "[email protected]:powerapps/graph-userdata-gateway.git"
  },
  "author": "Benjamin Pettinen / YO-bitti Oy",
  "license": "UNLICENSED",
  "dependencies": {
    "@microsoft/microsoft-graph-client": "^3.0.0",
    "dedent": "^0.7.0",
    "express": "^4.17.1",
    "isomorphic-fetch": "^3.0.0",
    "md5": "^2.3.0",
    "node-fetch": "^2.6.1"
  },
  "devDependencies": {
    "@types/dedent": "^0.7.0",
    "@types/express": "^4.17.13",
    "@types/isomorphic-fetch": "0.0.35",
    "@types/md5": "^2.3.1",
    "@types/node-fetch": "^2.5.12",
    "@typescript-eslint/eslint-plugin": "^4.29.2",
    "@typescript-eslint/parser": "^4.29.2",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-airbnb-typescript": "^13.0.0",
    "eslint-plugin-import": "^2.24.1",
    "typescript": "^4.3.5"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "esModuleInterop": true,
    "noImplicitAny": true,
    "moduleResolution": "Node",
    "outDir": "dist",
    "sourceMap": true
  }
}

I've tried deleting the whole node_mobules and re-running npm install as well as played with the extends in the .eslintrc.json. If I remove airbnb-typescript/base the error disappears, but I lose the Airbnb style from ESLint. Using airbnb-base instead works, but then ESLint complains about Missing file extension for abc.ts and Unable to resolve path to module abc. I have also multiple time restarted VSC and the ESLint server.

Fast

Could you send your repo here, it helps to trace/try the issue more properly? – Jaal

Answer 1

You missed adding this in your eslint.json file.

"plugins": ["import"],

Or,

"extends": ["plugin:import/recommended"]

Reference: https://github.com/import-js/eslint-plugin-import#resolvers

Tamboura

Thanks a lot! Spent multiple hours trying to fix this yesterday and this little addition to the plugins fixed it once and for all. Weird since I haven't needed this in any previous repositories with the exact same config, but I guess things change even between minor versions of eslint, typescript and the airbnb style guide. – Fast

You get the prize, sir! I've just spent over an hour trying to resolve this, this is a case of 'Only finding what you're looking for in the last place you looked for it!' - why couldn't I have found this first.... – Badajoz

If you do not see the fix take effect immediately: delete the node_modules directory and the package-lock.json file, run npm install and restart your IDE :) – Libna

For those using React 18+/TS/CRA, I recommend using "plugins": ["import"], instead of "extends": ["plugin:import/recommended"] because for some reason, you'll get something like ReportHandler not found in "web-vitals" for web-vitals ^2.1.4. – Love

Make sure 'import/extensions' config is nested beneath the 'settings' node too. Mine was incorrectly beneath the 'rules' node. – Welcome

Answer 2

For those coming here after the upgrade of Typescript Airbnb config to v13+ and wants to understand what has changed:

Read carefully the most recent README of the eslint-config-airbnb-typescript project.

Make sure you have the regular Airbnb config setup. See eslint-config-airbnb, or eslint-config-airbnb-base if you're not using React.

Sounds like something new for your old setup and it really is. That's because there was a breaking change in v13

Let's follow the suggestion.

According to eslint-config-airbnb-base instructions you should add eslint-config-airbnb-base and it's peer deps to your package.json. The easiest way to do it: npx install-peerdeps --dev eslint-config-airbnb-base. Right now this command will add both (eslint-config-airbnb-base and eslint-plugin-import) to your package.json:

     "eslint": "^8.7.0",
+    "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-plugin-import": "^2.25.4",

The final step will be adding airbnb-base right before the airbnb-typescript/base to extends array of eslint config:

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

That's it! The problem should be fixed now.

Tarnation

Answer 3

In my case, I was able to fix it by adding the "allowSyntheticDefaultImports" setting to "compilerOptions" in "tsconfig.json".

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
  }
}

Ref

Answer 4

If you are using .eslintrc.js then add this

module.exports = {
  ...otherSetting,
  plugins: ["import"],
}

Prevention

Answer 5

If there is no problem with the configuration

Problems caused by npm dependency hoisting

The project root directory will rely on the eslint that does not match the promotion installation, because the plug-in reports an error ESLint Definition for rule 'xxx' is not found

Detailed problem solving process in an article I wrote: https://www.yuque.com/cloudyan/faq/py7xb5

Dagan

When linking to your own site or content (or content that you are affiliated with), you must disclose your affiliation in the answer in order for it not to be considered spam. Having the same text in your username as the URL or mentioning it in your profile is not considered sufficient disclosure under Stack Exchange policy. – Discophile

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Cytochrome