CODEWITHSUNDEEP
typescriptvisual-studio-codeeslinteslintrceslint-config-airbnb
AirPett
AirPett

Reputation: 1014

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

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:

enter image description here

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.

Upvotes: 69

Views: 58729

Answers (5)

Ashwani Panwar
Ashwani Panwar

Reputation: 4568

If you are using .eslintrc.js then add this

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

Upvotes: 1

Cloudyan
Cloudyan

Reputation: 9

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

Upvotes: 0

Masayuki
Masayuki

Reputation: 11

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

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

Upvotes: 1

Kirill
Kirill

Reputation: 8046

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.

Upvotes: 34

hendrixchord
hendrixchord

Reputation: 5434

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

Upvotes: 147

Related Questions