Error: Cannot find module '@typescript-eslint/parser'

[MurzNN]

Describe the bug I have a v4.0.0-beta version of extension, and on formatting action it shows me the error:

Error: Cannot find module '@typescript-eslint/parser'
Require stack:
- /home/user/.vscode-server/extensions/rvest.vs-code-prettier-eslint-4.0.0-beta/dist/extension.js
- /home/user/.vscode-server/bin/899d46d82c4c95423fb7e10e68eba52050e30ba3/out/vs/loader.js
- /home/user/.vscode-server/bin/899d46d82c4c95423fb7e10e68eba52050e30ba3/out/bootstrap-amd.js
- /home/user/.vscode-server/bin/899d46d82c4c95423fb7e10e68eba52050e30ba3/out/bootstrap-fork.js 

But the '@typescript-eslint/parser' package is installed locally:

$ yarn list --pattern  '@typescript-eslint/parser'
yarn list v1.22.5
├─ @typescript-eslint/parser@5.8.1
└─ prettier-eslint@10.1.1
   └─ @typescript-eslint/parser@3.10.1

To Reproduce Steps to reproduce the behavior:

1. Install the v4.0.0-beta version of the extension.
2. Install '@typescript-eslint/parser' via yarn add @typescript-eslint/parser@^5.0.1
3. Select "Format Document With » Prettier ESLint".
4. See the error

Versions (please complete the following information):

• Visual Studio Code: Version: 1.63.2 Commit: 899d46d82c4c95423fb7e10e68eba52050e30ba3 Date: 2021-12-15T09:39:46.686Z Electron: 13.5.2 Chromium: 91.0.4472.164 Node.js: 14.16.0 V8: 9.1.269.39-electron.0 OS: Linux x64 5.13.0-22-generic

[MurzNN]

Seems this happens in projects, where have several root folders opened, in project with single folder - all works well.

[idahogurl]

@MurzNN What version of ESLint do you have installed? Could you provide your ESLint config file?

[neolitec]

I have the same issue with ESLint 6.8.0 and the current stable plugin (3.0.4).

I also have multiple projects in the same folder but since it's a monorepo I really want to have all of them opened at the same time. I tried to open a single package from it and I still have this issue.

I feel like it's an issue with prettier-eslint 🤔

[MurzNN]

@MurzNN What version of ESLint do you have installed? Could you provide your ESLint config file?

I have eslint@7.26.0 and .eslintrc.js config file is:

module.exports = {
  parser: '@typescript-eslint/parser',
  env: {
    browser: true,
    es6: true,
    node: true,
    jest: true,
    'cypress/globals': true,
  },
  plugins: [
    'react',
    'react-hooks',
    'jest',
    'cypress',
    'import',
    '@typescript-eslint',
    '@preconstruct/format-js-tag',
  ],
  settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    curly: ['error', 'multi-line'],
    'jsx-quotes': 'error',
    'no-trailing-spaces': 'error',
    'no-undef': 'error',
    'no-unused-expressions': 'error',
    'react-hooks/rules-of-hooks': 'error',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        args: 'after-used',
        ignoreRestSiblings: true,
        vars: 'all',
      },
    ],
    'import/no-extraneous-dependencies': [
      'error',
      {
        devDependencies: [
          '**/__tests__/**/*',
          '**/*test.*',
          '**/tests/**/*',
          '**/build/**/*',
          `packages/fields/src/**/filterTests.*`,
          '**/test-fixtures.*',
        ],
      },
    ],
    'import/no-unresolved': 'error',
    'import/order': 'error',
    'jest/valid-describe': 'off',
    'jest/valid-expect': 'off',
    'jest/no-conditional-expect': 'off',
    'jest/no-standalone-expect': 'off',
    'jest/expect-expect': 'off',
    'jest/no-export': 'off',
    'jest/valid-title': 'off',
    'jest/no-try-expect': 'off',
    'jest/no-disabled-tests': 'error',
    'object-curly-spacing': ['error', 'always'],
    quotes: ['error', 'single', { avoidEscape: true, allowTemplateLiterals: true }],
    'react/jsx-boolean-value': 'warn',
    'react/jsx-no-undef': 'error',
    'react/jsx-uses-react': 'error',
    'react/jsx-uses-vars': 'error',
    'react/jsx-wrap-multilines': 'warn',
    'react/no-did-mount-set-state': 'warn',
    'react/no-did-update-set-state': 'warn',
    'react/no-unknown-property': 'warn',
    'react/react-in-jsx-scope': 'error',
    'react/self-closing-comp': 'warn',
    'react/sort-prop-types': 'warn',
    semi: 'error',
    strict: 'off',
    'no-restricted-syntax': [
      'error',
      {
        // Curious why we have this rule?
        // - Enums only work for a subset of use cases that unions of string literals + objects work for and learning one language feature is easier than learning two language features
        // - Enums are a new language feature which have runtime semantics which means they change TypeScript from JS + types to JS + types + extra language features which is harder to teach without clear advantages for this specific feature
        selector: 'TSEnumDeclaration',
        message: 'Use a union of string literals instead of an enum',
      },
    ],
    '@typescript-eslint/ban-types': [
      'error',
      {
        extendDefaults: false,
        types: {
          Function:
            '`Function` types are unsafe. Use more specific function types instead. e.g. (arg: number) => string',
          String: {
            message:
              'The `String` type refers to the String object which is probably not what you want, you probably want `string` instead which refers to the string primitive type.',
            fixWith: 'string',
          },
          ComponentType: reactComponentTypeMessage,
          FC: reactComponentTypeMessage,
          SFC: reactComponentTypeMessage,
          'React.ComponentType': reactComponentTypeMessage,
          'React.FC': reactComponentTypeMessage,
          'React.SFC': reactComponentTypeMessage,
        },
      },
    ],
    '@preconstruct/format-js-tag/format': 'error',
  },
  extends: ['plugin:jest/recommended'],

  // Disable some rules for (code blocks within) Markdown docs
  overrides: [
    {
      files: ['**/*.md'],
      rules: {
        'no-unused-vars': 'off',
        'no-undef': 'off',
      },
    },
    {
      files: ['packages/fields/src/**/*.{js,ts,tsx}'],
      rules: {
        'import/no-commonjs': 'error',
      },
    },
    {
      files: ['**/*.{ts,tsx}'],
      rules: {
        // TypeScript already checks for the following things and they conflict with TypeScript
        'import/no-unresolved': 'off',
        'no-undef': 'off',
      },
    },
  ],
};

[neolitec]

I tried to see where require.resolve is looking for and I got:

• /Users/[user]/.vscode/extensions/rvest.vs-code-prettier-eslint-3.0.4/dist/node_modules
• /Users/[user]/.vscode/extensions/rvest.vs-code-prettier-eslint-3.0.4/node_modules
• /Users/[user]/.vscode/extensions/node_modules
• /Users/[user]/.vscode/node_modules
• /Users/[user]/node_modules
• /Users/node_modules
• /node_modules

...which is the expected behavior from Node AFAIK. But no, there's no such package in there :p

Should this extension add @typescript-eslint/parser as a dependency? Otherwise, how can we use the locally installed package (from the current project) or the one that has been globally installed?

Edit: I suspect that we might have the same issue with vue-eslint-parser.

See https://github.com/prettier/prettier-eslint/blob/master/src/index.js#L126

[idahogurl]

@neolitec I think it must be the multiple projects like @MurzNN suggested. What monorepo tool are you using? Lerna?

[neolitec]

Yes, I'm using Lerna.

[idahogurl]

@neolitec I work in a Lerna monorepo too. What I have is a package.json in the root that has Prettier and all my ESLint related packages. I have my ESLint and Prettier configs in the root as well. @MurzNN I will take a look at having a project with multi-root

[idahogurl]

@MurzNN I created an example repo to try to reproduce your issue. https://github.com/idahogurl/example-repo Basically it's a VS Code workspace with two separate projects (each with own node_modules). I have project2 using the ESLint config you provided.

In VS Code, you go to Open Workspace from File and select that project file. I wasn't 100% sure if this was your setup or if you just open the parent folder containing your projects. With this setup I was unable to reproduce your issue. I created test.ts in project2 and when I run the formatting on that file I don't get that error.

I gave you write access so feel free to adjust the project to match your setup.

@neolitec Did my comments about Lerna help? If not feel free to create a demo repo that reproduces the issue.

[neolitec]

@idahogurl I didn't have the time to investigate more on my first project. However, I have another work project where we recently updated the ESLint stack. It falls into the same issue now. I'm not in a monorepo this time and I'm pretty sure @typescript-eslint/parser is installed (5.9.0 to be precise). But for some reason, not detected anymore.

[idahogurl]

@neolitec Could you provide your ESLint config and package.json? The extension does not support ESLint 8+. They made some breaking changes to their API and Prettier-ESLint has not been updated. I was going to create a PR for them.

[murmanox]

Hello, I'm also having this issue. I'm using version 3.1.0 of the plugin with pnpm and eslint@7.32.0. Here's my package.json

{
  "name": "roblox-wordle",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rbxtsc",
    "watch": "rbxtsc -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@rbxts/compiler-types": "^1.2.3-types.1",
    "@rbxts/types": "^1.0.571",
    "@typescript-eslint/eslint-plugin": "^5.10.1",
    "@typescript-eslint/parser": "^5.10.1",
    "eslint": "7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-roblox-ts": "^0.0.32",
    "prettier": "1.9.1",
    "prettier-eslint": "10.1.0",
    "typescript": "^4.5.5"
  },
  "dependencies": {
    "@rbxts/services": "^1.2.0"
  }
}

Here's my .eslintrc

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "jsx": true,
        "useJSXTextNode": true,
        "ecmaVersion": 2018,
        "sourceType": "module",
        "project": "./tsconfig.json"
    },
    "plugins": [
        "@typescript-eslint",
        "roblox-ts",
    "prettier"
    ],
    "extends": [
        "plugin:@typescript-eslint/recommended",
        "plugin:roblox-ts/recommended"
    ],
    "rules": {
    "camelcase": "warn",
    "semi": [0, { "beforeStatementContinuationChars": "never" }],
    "quotes": ["single", { "avoidEscape": true }]
    }
}

[idahogurl]

@MurzNN Rename your .eslintrc to .eslintrc.js to make it a JavaScript file. Then add

tsconfigRootDir: __dirname

under

"project": "./tsconfig.json"

You are getting an error because the ESLint TS parser cannot find your tsconfig.json

[claritise]

@neolitec Could you provide your ESLint config and package.json? The extension does not support ESLint 8+. They made some breaking changes to their API and Prettier-ESLint has not been updated. I was going to create a PR for them.

Hi I am also having this issue and have a pretty stripped down list of dependencies. I also tried applying the fixes you reccomended @murmanox

package.json

{
  "name": "annayienzhang",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@openzeppelin/contracts": "^4.4.2",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^17.0.20",
    "@types/react-dom": "^17.0.9",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "node": "yarn hardhat node"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@nomiclabs/hardhat-ethers": "^2.0.0",
    "@nomiclabs/hardhat-waffle": "^2.0.0",
    "@typescript-eslint/eslint-plugin": "^5.10.2",
    "@typescript-eslint/parser": "^3.0.0",
    "chai": "^4.2.0",
    "eslint": "6.8.0",
    "eslint-plugin-react": "^7.28.0",
    "ethereum-waffle": "^3.0.0",
    "ethers": "^5.5.4",
    "hardhat": "^2.8.3",
    "prettier": "1.9.1",
    "prettier-eslint": "10.1.0"
  }
}

eslint.rc

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  root: true,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: "latest",
    sourceType: "module",
    project: "./tsconfig.json"
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {}
};

prettierrc.json

{
    "semi": true,
    "singleQuote": false,
    "trailingComma": "none"
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "extends": "./node_modules/@tsconfig/recommended/tsconfig.json"
}

[the-vampiire]

@MurzNN Rename your .eslintrc to .eslintrc.js to make it a JavaScript file. Then add

tsconfigRootDir: __dirname

under

"project": "./tsconfig.json"

You are getting an error because the ESLint TS parser cannot find your tsconfig.json

thank you this fixed it for me. for anyone else making that change just remember a .js uses module.exports which you add before the { of the json content

1. change to .js
2. add the exports

module.exports = { ... }

[idahogurl]

@claritise Did you name your file .eslintrc.js and follow what @the-vampiire did above? I seems like this is a new issue and I'm going to have to update my examples for Typescript implementation.

[the-vampiire]

@idahogurl i am now getting this error again

but only after adding the following rules:

    "import/order": [
      "error",
      { "newlines-between": "always", "alphabetize": false }
    ],
    "sort-imports": [
      "error",
      {
        "memberSyntaxSortOrder": ["none", "all", "single", "multiple"],
      }
    ],

working .eslintrc.js

module.exports = {
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "tsconfigRootDir": __dirname,
    "project": "./tsconfig.json"
  },
  "env": {
    "es6": true,
    "jest": true
  },
  "ignorePatterns": [
    "node_modules",
    "build",
    "coverage",
    ".eslintrc.js",
    "jest.config.js"
  ],
  "plugins": [
    "import",
    "eslint-comments",
    "@typescript-eslint",
    "jest"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:eslint-comments/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/typescript",
    "plugin:jest/recommended",
    "plugin:jest/style",
    "prettier"
  ],
  "globals": {
    "BigInt": true,
    "console": true,
    "WebAssembly": true
  },
  "rules": {
    "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "return" }],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "eslint-comments/disable-enable-pair": [
      "error",
      {
        "allowWholeFile": true
      }
    ],
    "eslint-comments/no-unused-disable": "warn",
    "jest/valid-title": "off",
  }
}

breaking .eslintrc.js

module.exports = {
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "tsconfigRootDir": __dirname,
    "project": "./tsconfig.json"
  },
  "env": {
    "es6": true,
    "jest": true
  },
  "ignorePatterns": [
    "node_modules",
    "build",
    "coverage",
    ".eslintrc.js",
    "jest.config.js"
  ],
  "plugins": [
    "import",
    "eslint-comments",
    "@typescript-eslint",
    "jest"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:eslint-comments/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/typescript",
    "plugin:jest/recommended",
    "plugin:jest/style",
    "prettier"
  ],
  "globals": {
    "BigInt": true,
    "console": true,
    "WebAssembly": true
  },
  "rules": {
    "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "return" }],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "eslint-comments/disable-enable-pair": [
      "error",
      {
        "allowWholeFile": true
      }
    ],
    "import/order": [
      "error",
      { "newlines-between": "always", "alphabetize": false }
    ],
    "sort-imports": [
      "error",
      {
        "memberSyntaxSortOrder": ["none", "all", "single", "multiple"],
      }
    ],
    "eslint-comments/no-unused-disable": "warn",
    "jest/valid-title": "off",
  }
}

[the-vampiire]

trying to help figure this out. ive traced the error to:

line 76 of extension.js (built)

[".ts", ".tsx"].includes(_) && (m.eslint.parser = m.eslint.parser || require.resolve("@typescript-eslint/parser"));

cant find this anywhere in your source code though.

so it must be something vscode injects automatically?

update:

tried installing @typescript-eslint/parser globally to see if that would fix it but it didnt either.

[idahogurl]

@the-vampiire That code is from 'prettier-eslint'. It gets bundled during the build. I'll take a look later today hopefully.

[the-vampiire]

@the-vampiire That code is from 'prettier-eslint'. It gets bundled during the build. I'll take a look later today hopefully.

Great thank you for this awesome extension. If there's anything I can do to help please just tag me.

[IvanaGyro]

I get eslint-config-airbnb-base@15.0.0" has unmet peer dependency "eslint-plugin-import@^2.25.2" warning when installing packages with yarn. After installing eslint-plugin-import, Error: Cannot find module '@typescript-eslint/parser' is fixed, and Prettier ESLint works perfectly.

[github-actions[bot]]

This issue is stale because it has been open for 14 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.

[ownchoice]

🚀 UPDATE: Fixed it! 🥳

I just removed the unused jsx-a11y plugin from my ESLint config.

I wasn't using JSX in my project but it had the following ESLint config:

  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:jsx-a11y/recommended',
    'airbnb-base/legacy',
    'prettier',
  ],
  plugins: ['@typescript-eslint', 'prettier', 'jsx-a11y', 'import'],

Because I had copied the .eslintrc.js file from another project.

Also I didn't have the eslint-plugin-jsx-a11y package installed, installing it also fixes the issue.

---

Original comment:

Getting this error with the latest pre-release version (v5.0.1):

Error: Cannot find module '@typescript-eslint/parser'
Require stack:
- c:\Users\win10user\.vscode\extensions\rvest.vs-code-prettier-eslint-5.0.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 
Error: Cannot find module '@typescript-eslint/parser'
Require stack:
- c:\Users\win10user\.vscode\extensions\rvest.vs-code-prettier-eslint-5.0.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
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:987:15)
    at Function.h.resolve (c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js:4:761)
    at Lge (c:\Users\win10user\.vscode\extensions\rvest.vs-code-prettier-eslint-5.0.1\dist\extension.js:180:1235)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

The following didn't work:

@MurzNN Rename your .eslintrc to .eslintrc.js to make it a JavaScript file. Then add

tsconfigRootDir: __dirname

under

"project": "./tsconfig.json"

You are getting an error because the ESLint TS parser cannot find your tsconfig.json

[chy9610]

@ownchoice Written this way, mine doesn't work.

[idahogurl]

@chy9610 More than likely something else is wrong with your ESLint config. Try running npx eslint --print-config [config file name]. Replace [config file name] with the name of your config file. This command will let you know if you have other errors.

[chy9610]

@idahogurl Thank you. Let me try.

[chy9610]

@idahogurl Succeed, Very Nice. (^o^)/~