Cannot find module '@typescript-eslint/parser' when using Prettier Eslint

Question

I'm getting the following error from Prettier Eslint Output on VSCode when saving the file.

Error: Cannot find module '@typescript-eslint/parser'
Require stack:
- c:\Users\vtnor\.vscode\extensions\rvest.vs-code-prettier-eslint-0.4.1\dist\extension.js
- c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Program Files\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Program Files\Microsoft VS Code\resources\app\out\bootstrap-fork.js

My package json is:

[...]
"typescript": "^4.2.2",
"@typescript-eslint/eslint-plugin": "^4.16.1",
"@typescript-eslint/parser": "^4.16.1",
"eslint": "^7.21.0",
"prettier": "^2.2.1",
"prettier-eslint": "^12.0.0",
[...]

Answer 1

i actually had this problem the other day ey, you need to go to your .eslintrc and make sure that the module is there under the parser property of the config...should look something like this in the end:

{
  //...

  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],

  //...
}

This should cover the essentials regarding dependencies in your linter...hope it helps

Edit

I checked git hub for this issue, might not be the same as the one I had, check this link please https://github.com/prettier/prettier-vscode/issues/905

Answer 2

The problem probably that .eslintrc is not finding necessary modules because that are in a wrong location. .eslintrc needs to have folder node_modules right next to it. This can easily be achieved by putting .eslintrc into the project folder and creating package.json right next to it. Then node_modules will also be created in the project folder and the necessary (and installed) modules will be found.

Your project folder should look similar to:

Answer 3

I discovered that the cause of the error in my case was ESLint itself was throwing an error. I discovered this by looking at the ESLint output in VSCode. The fix was to update one of my other dependencies (eslint-plugin-import).

Answer 4

Had this problem also, I resolved disabling, then reloading and re-enabling ESLint extension of VSCode.

Hope this helps;)

Answer 5

I just added the metro.config.js (like I did for an other fix for babel.config.js ) to .eslintignore .

Answer 6

Installing @typescript-eslint/eslint-plugin and then reloading VSCode solved the issue for me.

Hope this helps anyone:D

Answer 7

Open VS Code in the correct directory.

Example, we have:

/dir1/
/dir1/node_modules

In the dir1 directory
. Right click
. Open with Code

Answer 8

Fixed this with npm remove @typescript-eslint/parser && npm install @typescript-eslint/parser