James Mulholland
James Mulholland

Reputation: 1872

ESLint couldn't find the plugin "eslint-plugin-@typescript-eslint"

I'm not sure if there's a bug with something I'm using or whether I've just set something up wrong here, but I'm getting this error from eslint when running eslint src --fix about "eslint-plugin-@typescript-eslint"

I've specified the plugin as listed in the @TypeScript-eslint docs but I'm getting this weird error where eslint is trying to add 'eslint-plugin-' to the start of the plugin name (the package name is @typescript-eslint/eslint-plugin)

I'm using Gatsby and the accompanying TypeScript plugin.

Error

$ eslint src --fix

Oops! Something went wrong! :(

ESLint: 4.19.1.
ESLint couldn't find the plugin "eslint-plugin-@typescript-eslint". This can happen for a couple different reasons:

1. If ESLint is installed globally, then make sure eslint-plugin-@typescript-eslint is also installed globally. A globally-installed ESLint cannot find a locally-installed plugin.

2. If ESLint is installed locally, then it's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm i eslint-plugin-@typescript-eslint@latest --save-dev

.eslintrc.js:

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  env: {
    browser: true,
    node: true,
    es6: true,
    'jest/globals': true,
  },
  plugins: ['@typescript-eslint', 'react', 'jest'],
  extends: [
    'standard',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:jest/recommended',
    'plugin:prettier/recommended',
    // 'eslint-config-prettier', // must be last
    'prettier/@typescript-eslint',
  ],
  rules: {
    'react/prop-types': 0,
    'jsx-quotes': ['error', 'prefer-single'],
    'react/no-unescaped-entities': 0,
  },
  settings: {
    react: {
      version: 'detect',
    },
    linkComponents: [
      // Components used as alternatives to <a> for linking, eg. <Link to={ url } />
      'Hyperlink',
      { name: 'Link', linkAttribute: 'to' },
    ],
  },
}

package.json

{
  "name": "jmulholland.com",
  "description": "My personal website",
  "license": "MIT",
  "scripts": {
    "dev": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "lint": "eslint src --fix",
    "prettier": "prettier \"**/*.+(js|jsx|ts|tsx|json|css|md|mdx|graphql)\"",
    "format": "yarn prettier --write",
    "type-check": "tsc --noEmit",
    "validate": "yarn lint && yarn prettier --list-different"
  },
  "dependencies": {
    "gatsby": "^2.1.4",
    "gatsby-plugin-react-helmet": "^3.0.6",
    "gatsby-plugin-styled-components": "^3.0.5",
    "gatsby-plugin-typescript": "^2.0.10",
    "gatsby-plugin-typography": "^2.2.7",
    "gatsby-remark-prismjs": "^3.2.4",
    "gatsby-source-contentful": "^2.0.29",
    "gatsby-transformer-remark": "^2.3.0",
    "prismjs": "^1.15.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "react-helmet": "^5.2.0",
    "react-typography": "^0.16.18",
    "styled-components": "^4.1.3",
    "typography": "^0.16.18"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^1.4.2",
    "@typescript-eslint/parser": "^1.4.2",
    "babel-jest": "^24.1.0",
    "babel-plugin-styled-components": "^1.10.0",
    "babel-preset-gatsby": "^0.1.8",
    "dotenv": "^6.0.0",
    "eslint": "^4.19.1",
    "eslint-config-prettier": "^4.1.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jest": "^22.3.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-react": "^7.11.1",
    "eslint-plugin-standard": "^4.0.0",
    "faker": "^4.1.0",
    "husky": "^1.3.1",
    "jest": "^24.1.0",
    "lint-staged": "^8.1.5",
    "prettier": "^1.16.4",
    "typescript": "^3.3.3333"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

Upvotes: 41

Views: 54725

Answers (11)

Learner Dotcom
Learner Dotcom

Reputation: 19

I was getting this error as lint script in my code had below sections added.
'./src/**/' './test/'
After removing these from script, job started passing. Error is misleading though and took lots of time to fix.

Upvotes: -1

patriot10
patriot10

Reputation: 181

Adding "root": true to the .eslintrc.json helped me.

"root": true is a generally good ESLint practice to indicate this file is the root-level one used by the project and ESLint should not search beyond this directory for config files.

https://typescript-eslint.io/getting-started#details

Upvotes: 14

Eric Yang
Eric Yang

Reputation: 81

Recently I met the same problem when I am trying to use ESLint and Prettier in my project which is created in 2017 and using Angular 9. After googled a lot, I just solved it by upgrading ESLint to version 8+. Version 6+ also works but version 7+ may cause another error. That's really weird.

Then I added a new script like:

./node_modules/eslint/bin/eslint.js ./ --ext .ts,.tsx --config .eslintrc.js --fix

And ESLint just works fine. And you can add some configs in .eslintrc.js (on) file to let ESLint know which files are supposed to be linted and formatted.

Upvotes: 0

DaWe
DaWe

Reputation: 1702

Issues can cause this:

  • Outdated ESLint.
  • ESLint installed globally and locally at the same time. Solution.
  • Missing .eslintrc config file from the project folder. Solution: npx eslint --init
  • Additional node_modules folder in the project-parent folder outside your project.
  • Additional .eslintrc in the project-parent folder outside your project.
  • Wrong package config. Read more.

Upvotes: 1

Gomah
Gomah

Reputation: 691

I just faced this issue on a large monorepo, found two solutions that fixed it for us:

{
  "scripts": {
    "lint": "eslint src --resolve-plugins-relative-to ."
  }
}

If you use yarn workspace, yarn run could also do the trick:

{
  "scripts": {
    "lint": "yarn run eslint src"
  }
}

Upvotes: 6

Matthias
Matthias

Reputation: 1162

In my case one of the parent directories had another node_modules folder.

Moving the package directory into a path with no other node_modules folder in the parent tree removed the error.

Upvotes: 0

Charles
Charles

Reputation: 187

For any future readers who might be facing this issue, in my case I was working with a multi-stage Docker build based on the node:alpine image. The multi-stage build was meant to create a separation between the app's dependencies and the devDependencies (in package.json).

At some point in creating my Dockerfile, which underwent quite a few modifications over several hours, I added the following line towards the beginning of my Dockerfile:

ENV NODE_ENV production 

This causes npm to ignore the devDependencies packages, which in turn causes ESLint to fail (because it isn't installed).

I moved the environment variable declaration to my final (release) build stage, where I originally wanted it, and then npm installed all required packages and ESLint ran successfully.

Hopefully this saves someone some precious time.

Upvotes: 5

Alex Aymkin
Alex Aymkin

Reputation: 518

my solution on Mac was like

  • go to global node_modules cd /usr/local/lib/node_modules/
  • delete global eslint rm -rf eslint
  • run the command once again eslint index.js app storybook test --fix --ext .js,.ts,.tsx
  • profit

Upvotes: 1

Thaadikkaaran
Thaadikkaaran

Reputation: 5226

Since i faced same issue with eslint now, i'm posting here about the root cause of the issue in my case.

I installed this eslint-nullish-coalescing plugin which is a fork of eslint to nullish coalescing. This plugin changed the content of node_module\.bin\eslint.cmd file.

from

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\eslint\bin\eslint.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\eslint\bin\eslint.js" %*
)

to

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\eslint-nullish-coalescing\bin\eslint.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\eslint-nullish-coalescing\bin\eslint.js" %*
)

Because of this, eslint could not find the right plugins for its work, hence the error 😰.

Though OP is not using eslint-nullish-coalescing package, but i would suggest to verify the content of the node_modules\.bin\eslint.cmd file if anyone who are facing this issue now.

Upvotes: 0

Babak
Babak

Reputation: 1344

Another reason that could cause this issue is not having ESLint configured.

In my case, adding a .eslintrc.json file to the root directory (with proper configuration) fixed the issue.

Upvotes: 0

James Mulholland
James Mulholland

Reputation: 1872

Solution was simply to upgrade to the latest version of eslint

Upvotes: 22

Related Questions