Vscode-eslint: ESLint: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': createRequire is not a function

[amitshirke1234]

eslintrs.json:
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 11,
"sourceType": "module"
},
"plugins": [
"@typescript-eslint"
],
"rules": {
"indent": [
"warn",
4,
{
"SwitchCase": 1
}
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"warn",
"single"
],
"no-unused-vars": "warn",
"no-console": "warn"
}
}

settings.json:
{
"eslint.validate": [
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
},
"typescript", "typescriptreact"
]
}

Please help to resolve mentioned error in title. Thanks

[dbaeumer]

@amitshirke1234
does the validation happen correctly when you use eslint in the terminal. If this is the case can you please provide me with a GitHub repository I can clone that demos what you are experiencing.

[amitshirke1234]

Hi @dbaeumer,

Below is my git repository, you can clone it:
https://github.com/amitshirke123/sample-project.git

Steps I followed:

1. Added eslint plugin through Extensions option in View menu of Visual studio.
2. Installed eslint using sudo npm install eslint.
3. Executed sudo eslint --init command in Terminal (Command ran successfully)
4. Then went to project files e.g, app.component.ts file Then I got below error in Output channel.

Error:
[Info - 8:41:47 PM] ESLint server stopped.
[Info - 8:41:47 PM] ESLint server running in node v10.11.0
[Info - 8:41:47 PM] ESLint server is running.
[Info - 8:41:48 PM] ESLint library loaded from: /home/ue/sampleproject/sample-project/TestProj/node_modules/eslint/lib/api.js
[Error - 8:41:48 PM] ESLint stack trace:
[Error - 8:41:48 PM] TypeError: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': createRequire is not a function
Referenced from: /home/ue/sampleproject/sample-project/TestProj/.eslintrc.json
at Object.resolve (/home/ue/sampleproject/sample-project/TestProj/node_modules/eslint/lib/shared/relative-module-resolver.js:28:20)
at ConfigArrayFactory._loadPlugin (/home/ue/sampleproject/sample-project/TestProj/node_modules/eslint/lib/cli-engine/config-array-factory.js:992:39)
at ConfigArrayFactory._loadExtendedPluginConfig (/home/ue/sampleproject/sample-project/TestProj/node_modules/eslint/lib/cli-engine/config-array-factory.js:812:29)
at ConfigArrayFactory._loadExtends (/home/ue/sampleproject/sample-project/TestProj/node_modules/eslint/lib/cli-engine/config-array-factory.js:761:29)
at ConfigArrayFactory._normalizeObjectConfigDataBody (/home/ue/sampleproject/sample-project/TestProj/node_modules/eslint/lib/cli-engine/config-array-factory.js:702:25)
at _normalizeObjectConfigDataBody.next ()
at ConfigArrayFactory._normalizeObjectConfigData (/home/ue/sampleproject/sample-project/TestProj/node_modules/eslint/lib/cli-engine/config-array-factory.js:647:20)
at _normalizeObjectConfigData.next ()
at ConfigArrayFactory.loadInDirectory (/home/ue/sampleproject/sample-project/TestProj/node_modules/eslint/lib/cli-engine/config-array-factory.js:495:28)
at CascadingConfigArrayFactory._loadConfigInAncestors (/home/ue/sampleproject/sample-project/TestProj/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:355:46)

Let me know if you need any other info. Thanks

[dbaeumer]

In the steps you are using you need to install @typescript-eslint as well. See https://github.com/microsoft/vscode-eslint#using-eslint-to-validate-typescript-files how to setup eslint for typescript. Or simply run npm install in the project.

[cawoodm]

None of the guides I've seen say to install @typescript-eslint. They mostly say install @typescript-eslint/eslint-plugin and @typescript-eslint/parser.

[amitshirke1234]

@dbaeumer I have already install @typescript-eslint/eslint-plugin and @typescript-eslint/parser.
My Package.json:
{
"name": "test-proj",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.2.4",
"@angular/common": "~8.2.4",
"@angular/compiler": "~8.2.4",
"@angular/core": "~8.2.4",
"@angular/forms": "~8.2.4",
"@angular/platform-browser": "~8.2.4",
"@angular/platform-browser-dynamic": "~8.2.4",
"@angular/router": "~8.2.4",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.2",
"@angular/cli": "~8.3.2",
"@angular/compiler-cli": "~8.2.4",
"@angular/language-service": "~8.2.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"@typescript-eslint/eslint-plugin": "^2.34.0",
"@typescript-eslint/parser": "^2.34.0",
"codelyzer": "^5.0.0",
"eslint": "^7.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}

Error while installing @typescript-eslint :
I ran command sudo npm install @typescript-eslint:

npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "@typescript-eslint": Tags may not have any characters that encodeURIComponent encodes.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/ue/.npm/_logs/2020-06-03T14_07_59_945Z-debug.log

Please help. Issue is not yet resolved. Thanks

[dbaeumer]

@amitshirke1234
does the validation happen correctly when you use eslint in the terminal. If this is the case can you please provide me with a GitHub repository I can clone that demos what you are experiencing.

[rkanjani]

+1 seeing the same issue, noticing it in the ESLint server within VSCode itself

Edit: I realized I was on an older version of VSCode, updating it fixed it.

[amitshirke1234]

@dbaeumer @rkanjani @cawoodm
Yes. Updating VSCode to latest version fixed the issue. Thanks

[jorgedavila25]

What was the VSCode fix? I'm seeing this issue in GCP's Cloudbuild using their node container:

  - name: gcr.io/cloud-builders/npm:node-10.10.0
    args: [run, lint]

I know it's unrelated to VSCode, but whatever VSCode did to fix the issue could be helpful to pin down why it's happening in GCP.

Thank you