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.

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

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.