Failed to load plugin '@typescript-eslint' declared in '.eslintrc » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'

[meness]

Describe the bug

When I run eslint: lint whole folder task, it fails because of the error mentioned in the title.

Did you try recovering your dependencies?

Yes, I did.

Which terms did you search for in User Guide?

The issue is not related to any of them, it's ESLint.

Environment

Environment Info:

  current version of create-react-app: 3.4.1
  running from C:\Users\X\AppData\Roaming\npm\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-2670QM CPU @ 2.20GHz
  Binaries:
    Node: 12.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Users\X\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.4 - C:\Users\X\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
    Internet Explorer: Not Found
  npmPackages:
    react: ^16.13.1 => 16.13.1
    react-dom: ^16.13.1 => 16.13.1
    react-scripts: ^3.4.1 => 3.4.1
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

Just run eslint: lint whole folder task.

This is my ESLint config:

{
  "extends": [
    "react-app",
    "airbnb",
    "prettier"
  ],
  "env": {
    "mocha": true,
    "es6": true,
    "commonjs": true,
    "browser": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true,
      "experimentalObjectRestSpread": true
    }
  },
  "plugins": [
    "prettier"
  ],
  "rules": {
    "no-underscore-dangle": "off",
    "class-methods-use-this": "off",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true
      }
    ]
  }
}

Expected behavior

It should not throw exceptions.

Actual behavior

It throws the above exception.

Reproducible demo

[dabonnestor]

Having also the same problem ☹

[Chernavskikh]

same issue

[techimist]

having exactly same problem

[Annis-Monadjem]

having exact same problem:

Kernel: 4.15.0-99-generic x86_64 bits: 64 compiler: gcc v: 7.5.0 Desktop: Xfce 4.14.1 Distro: Linux Mint 19.3 Tricia base: Ubuntu 18.04 bionic

[damien-git]

Related issues: #6834, #8745.

[Vanuan]

Do you have any ts files in the folder you're trying to lint?

find . -name '*.ts?'

[Vanuan]

Here's the config that triggers the error:

https://github.com/facebook/create-react-app/blob/f5c3bdb65480f93b2d4a4c2f3214fc50753de434/packages/eslint-config-react-app/index.js#L57-L69

Apparently, *.ts files are being compiled even if you specify js glob pattern: eslint './src/**/*.{js,jsx}'. Maybe it's a bug in the eslint plugin loading mechanism

[Vanuan]

The "lint whole folder" task you mentioned suggests you're using VSCode. So maybe create an issue in the https://github.com/microsoft/vscode-eslint repo

[LazzyLizzard]

The "lint whole folder" task you mentioned suggests you're using VSCode. So maybe create an issue in the https://github.com/microsoft/vscode-eslint repo

So it there any workaround to override parser or any other settings in local .eslintrc file?

[Chernavskikh]

The "lint whole folder" task you mentioned suggests you're using VSCode. So maybe create an issue in the https://github.com/microsoft/vscode-eslint repo

I don't use vs code or .ts files - there is an issue with create-react app

[LazzyLizzard]

Well the only thing that helped me is npm install --save typescript. It's bad, but however it resolves the problem.

[Vanuan]

@Chernavskikh I was referring to OP. Which task did you run?

What's the output of find . -name '*.ts?'

[mariagnoriegag]

Same problem here.

[Lelith]

also did just run into it, i am not using typescript in my project. here is my eslint config

  "extends": [
    "react-app",
    "airbnb",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "jsx-a11y",
    "prettier"
  ],
  "rules": {
    "semi": 0,
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".js",
          ".jsx"
        ]
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "semi": false
      }
    ]
  }
}

[Vanuan]

@Lelith what's the command you're running?

[Lelith]

@Vanuan i was following this article to set it up: https://medium.com/@pppped/extend-create-react-app-with-airbnbs-eslint-config-prettier-flow-and-react-testing-library-96627e9a9672

and the react script used is: "lint": "eslint ."

as additional node - i started a fresh project based on the create-react-app template redux

here is my package.json

{
  "name": "flashcard",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.1.3",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint ."
  },

  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "^2.0.5"
  }
}

i use VSCode but i tried executing the command also from my normal terminal, where it fails with the same error message. The VSCode linter per file works without throwing exceptions.

[Kicu]

I am getting the same error.

I am not using TS in my project, however the problem has started after I added a single typedefs.d.ts file in my /src folder. Eslint breaks on this file with the exact same error message.

The built-in eslint integration in Webstorm runs correctly per-file on all the files but crashes with the same error on my typedefs file.

I have extended my eslint config, here's my eslintrc:

{
  "extends": [
    "react-app",
    "prettier",
    "prettier/react",
    "plugin:prettier/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/recommended"
  ],
  "plugins": [
    "prettier",
    "jsx-a11y",
    "import"
  ],
  "rules": {
    "prettier/prettier": "error",
    "import/first": "error",
    "import/newline-after-import": "error",
    "import/order": ["error", {
      "newlines-between": "always",
      "pathGroups": [
        {
          "pattern": "./*.scss",
          "group": "index",
          "position": "after"
        }
      ]
    }]
  }
}

macOS Catalina v 10.15.5 (19F101)

[Vanuan]

@Kicu The plugin determines whether you're using Typescript or not by searching for *.ts files. You think you're not using ts while in fact you are.

You can either continue running eslint per file or remove the ts file eslint is trying to lint

[Vanuan]

@Lelith so the command you're running is eslint .. The dot means "current working directory". Which means it would lint all the files, even those you don't consider to be a part of your project.

Try to limit the scope of your lint command by changing it to the folder you want to lint, e.g. eslint ./folder. Or remove all the *.ts you can find in your project directory.

[Lelith]

@Vanuan thank you, it fixed my problem!

So I changed my script from eslint . to estlint ./src and it now works like a charm. So I guess it was finding some *.ts file in any of the node modules or any other hidden folder that might have a ts file.

[maldimirov]

The issue can be resolved by using a .eslintignore file. In my case is seems eslint was trying to lint the node_modules and adding a eslintignore file with just node_modules in it stop the error.

[damien-git]

I thought node_modules would be ignored because I read this in eslint's user guide:

In addition to any patterns in the .eslintignore file, ESLint always follows a couple implicit ignore rules even if the --no-ignore flag is passed. The implicit rules are as follows:

• node_modules/ is ignored.
• Dotfiles (except for .eslintrc.*) as well as Dotfolders and their contents are ignored.

There are some exceptions to this documented in the user guide but I don't think they apply to my case. Maybe I hit an undocumented exception because I was using ./node_modules/.bin/eslint. In any case, using .eslintignore or ignorePatterns in the .eslintrc file resolves the issue I had.

[Prat041192]

I'm facing the same problem. Using Visual code v1.46. 1) No .ts file is used 2) .eslintignorefile states to ignore node_modues/* 3) there is a separate configuration file .eslintrc.json.

There is no error on my local (i.e. Visual Code) but on the quality gate in the CI/CD pipeline of Gitlab.

Can somebody please help

[maldimirov]

@Prat041192 could it be you have misspelled? In your comment you are missing a l. node_modues/* should be node_modules/*

[Prat041192]

@maldimirov not really I checked it in my code. It is something else as I'm getting this error in the quality gate while deploying via CI/CD pipeline. Currently, I'm checking the quality gate job of the pipeline.

[RomuloDevelop]

This error happens to me because i wasn't installed typescript locally. I thought that this was not required, i'm working on a node.js project

[textbook]

1. Why does this happen? Because, although ESLint does indeed ignore node_modules/ by default, the override does not in terms of deciding whether the TypeScript plugins should be loaded (which is why you see eslint-config-react-app#overrides[0] in the error).

   The override is provided so that, if there is any TypeScript in your project, those rules are automatically applied. However, as the override is enabled by the presence of TypeScript files in node_modules/, it then tries to load those plugins. They require TypeScript, so you see TS-related failures even though you have no TS in your own code.

2. How do I fix it? There are a couple of options, which have been outlined on this SO question, broadly:

   • Install TypeScript anyway. This will allow the plugins to load, although they won't actually get used. This works fine but adds complexity (and surface area for vulnerabilities) to your dependencies.

   • Explicitly ignore node_modules/. You can do using any of the configuration options ESLint offers. The simplest is probably to have node_modules/ listed in a root .eslintignore, but there are a couple of others.

3. How will it get fixed upstream? I opened #9310 to fix this, applying the latter solution; looks like it's currently scheduled for the 4.1 milestone.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ghost]

Thanks for textbooks

[jshor]

I'm having this issue as well using react-scripts@3.4.3 and it doesn't appear to be related to linting node_modules. My script runs eslint ./src --ext ts,tsx.

The only way to resolve this was by adding typescript as a devDependency which, as others pointed out, is a bad solution.

[textbook]

@jshor in your case it appears you do have TypeScript files in src/, because that's what you're explicitly linting.

[andregp2210]

I was having the same issue, but after create a .eslintignore file and add node_modules, everything goes well, hope it helps

[Gorb]

Can confirm this still happens with a basic create-react-app project on yarn start.

npm view create-react-app version returns 4.0.0. Node 10.20.0, npm 6.14.0.

[textbook]

@Gorb as I mentioned above the fix appears to be scheduled for 4.1.

[Gorb]

@Gorb as I mentioned above the fix appears to be scheduled for 4.1.

Ah sorry, missed that detail. Thanks!

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[karlhorky]

not stale

[iamlepin]

Did you try "npm i -D typescript" in your project dir?

[iamlepin]

I spent 4 hours to find this solution. And it seams that error "Failed to load plugin '@typescript-eslint' declared in '.eslintrc " does not describe what's actually going on. PS. Sorry for my English)

[dominicfraser]

Using:

"lint": "eslint --ignore-path .gitignore .",

also works.

https://eslint.org/docs/user-guide/configuring/ignoring-code#using-an-alternate-file

This comment seems correct, and this is one example of working around it for now: https://github.com/facebook/create-react-app/issues/8936#issuecomment-674060591

[iansu]

Can you try the latest version of v4 and see if this is still an issue?

[vaibhavpandeyvpz]

@iansu Yes, it is an issue when I run eslint . but when I created a .eslintignore file with node_modules/, it vanished. No need to install typescript into project.

[kmvan]

ESLint couldn't find the config "plugin:@typescript-eslint/eslint-plugin" to extend from. Please check that the name of the config is correct.

The config "plugin:@typescript-eslint/eslint-plugin" was referenced from the config file in "/path/to/.eslintrc".

Not works.

[azatTemirbek]

lint :"eslint ./src"

[alvipeo]

same issue when upgraded to 8.0.0 (from 7.x)

[textbook]

@alvipeo it's a problem with the configuration in CRA, not ESLint itself. Changing ESLint version won't make any difference, this is scheduled for a fix in CRA 4.1.

[alvipeo]

@textbook thank you for clarifying it. But I did downgrade to 7.32.0 and everything works again...

[alvipeo]

damn, I just found out this is a wrong repo! :) sorry...

[nagarciah]

I run npm install @typescript-eslint/eslint-plugin@latest --save-dev. Maybe is not the right thing to do but it worked

[riku99]

@nagarciah works for me, Thanks!