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

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.

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

@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.

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

make sure your node version is not 12.x . i used a higher version with nvm and it is resolved. (16.14.0)

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

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

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)

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.

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

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

In my case it was an issue with using yarn and npm. No I am not using them together, I always use yarn but this particular project was using npm and by muscle memory I added a package with yarn add <package> but stopped it mid way.

Then I installed it using npm i <package> and issue started happening. Can’t guarantee 100% this was the cause, but the timing of stuff made me think that. 🤷‍♂️

My solution was deleting node_modules and install again using npm.

Ran in to this issue with a repo on two different dev machines. Issue was node version. The repo was built for node 16, the machine running node 12 threw this error. Hope this helps someone in the future 👍

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

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

npm install resolve the issue for me

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.

@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.

My problem was solved with next workaround: npm install -D eslint@7.32.0 https://github.com/eslint/eslint/issues/15149#issuecomment-939501275

@nagarciah works for me, Thanks!

@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.

@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.

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
      }
    ]
  }
}

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

And need to change path of ESLint package. Settings -> Language & Frameworks -> JavaScript -> Code Quality Tools ->EsLint.
Check field ‘Manual ESLint configuration’ -> ESLint package. It was “…/current project/node_modules/eslint” and I change path to “C:\Program Files\nodejs\node_modules\eslint” and it’s work for me)

p.s. Configuration File -> Automatic search

@tonykaram1993 this was the only solution in the thread that worked for me! Thanks!

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

@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.

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

@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

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