Bug: (TypeError: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': Class extends value undefined is not a constructor or null)

[lucasriondel]

Environment

Node version: v14.18.0
npm version: 6.14.15
yarn version: 1.22.10
Local ESLint version: 8.0.0
Global ESLint version: -
Operating System: Windows 11

What parser are you using?

@typescript-eslint/parser

What did you do?

Configuration

.eslintrc.json

{
    "root": true,
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "plugins": ["@typescript-eslint"],
    "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
    "rules": {
        "@typescript-eslint/naming-convention": "warn",
        "@typescript-eslint/semi": "warn",
        "curly": "warn",
        "eqeqeq": "warn",
        "no-throw-literal": "warn",
        "semi": "off"
    }
}

.eslintignore

dist
node_modules

package.json

...
"scripts": {
        "lint": "eslint ./src/** --ext .ts",
        "prettier": "prettier --write ./",
    },
"devDependencies": {
        "@types/glob": "^7.1.3",
        "@types/mocha": "^8.0.4",
        "@types/node": "^12.11.7",
        "@types/vscode": "^1.54.0",
        "@typescript-eslint/eslint-plugin": "^4.33.0",
        "@typescript-eslint/parser": "^4.33.0",
        "eslint": "^8.0.0",
        "glob": "^7.1.6",
        "husky": "^7.0.2",
        "mocha": "^8.2.1",
        "prettier": "^2.4.1",
        "ts-loader": "^8.0.14",
        "typescript": "^4.4.3",
        "webpack": "^5.19.0",
        "webpack-cli": "^4.4.0"
    },

command launched

yarn
yarn lint

What did you expect to happen?

I expect eslint to lint my files.

What actually happened?

yarn
yarn install v1.22.10
[1/5] Validating package.json...
warning snippets-viewer@1.10.0: The engine "vscode" appears to be invalid.
[2/5] Resolving packages...
[3/5] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
warning " > @typescript-eslint/eslint-plugin@4.33.0" has incorrect peer dependency "eslint@^5.0.0 || ^6.0.0 || ^7.0.0".
warning " > @typescript-eslint/parser@4.33.0" has incorrect peer dependency "eslint@^5.0.0 || ^6.0.0 || ^7.0.0".
[5/5] Building fresh packages...
$ husky install
husky - Git hooks installed
Done in 2.33s.

yarn run v1.22.10
warning snippets-viewer@1.10.0: The engine "vscode" appears to be invalid.
$ eslint ./src/** --ext .ts

Oops! Something went wrong! :(

ESLint: 8.0.0

TypeError: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': Class extends value undefined is not a constructor or null
Referenced from: E:\dev\vscode-snippets-editor\.eslintrc.json
    at Object.<anonymous> (E:\dev\vscode-snippets-editor\node_modules\@typescript-eslint\experimental-utils\dist\ts-eslint\CLIEngine.js:12:34)
    at Module._compile (E:\dev\vscode-snippets-editor\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (E:\dev\vscode-snippets-editor\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (E:\dev\vscode-snippets-editor\node_modules\@typescript-eslint\experimental-utils\dist\ts-eslint\index.js:14:14)
    at Module._compile (E:\dev\vscode-snippets-editor\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Participation

• I am willing to submit a pull request for this issue.

Additional comments

No response

[lucasriondel]

It seems to be working with eslint 7.32.0.

[jukbot]

Confirmed this issue, got this error after upgraded to 8.0.0. I've to rollback to 7.32.0 for workaround.

[tylerray0722]

I also have this issue after install 8.0.0.

[aladdin-add]

eslint v8 will be supported in ts-eslint v5. please follow the issue: typescript-eslint/typescript-eslint#3738

[nzakas]

As noted, this is an issue with typescript-eslint. We will leave this issue open for visibility.

You can try the release candidate of the new version:

npm install typescript-eslint@rc-v5

[Cristiandi]

thanks @nzakas working fine with @rc-v5

[lucasriondel]

@nzakas Thanks a lot for the fast response !! ✨

[youngjuning]

I also have this issue after install 8.0.0.

[aladdin-add]

update: ts-eslint v5.0.0 has been released. 🎉

[nzakas]

@aladdin-add thanks for the heads up! Closing this issue as resolved.

[KrakenTyio]

I have still this issue after upgradin to ts-eslint 5.0.0

"dependencies": {
    "@agm/core": "~3.0.0-beta.0",
    "@angular/animations": "~12.2.10",
    "@angular/cdk": "~12.2.9",
    "@angular/common": "~12.2.10",
    "@angular/compiler": "~12.2.10",
    "@angular/core": "~12.2.10",
    "@angular/elements": "~12.2.10",
    "@angular/forms": "~12.2.10",
    "@angular/localize": "~12.2.10",
    "@angular/platform-browser": "~12.2.10",
    "@angular/platform-browser-dynamic": "~12.2.10",
    "@angular/router": "~12.2.10",
    "@ckeditor/ckeditor5-angular": "~2.0.2",
    "@ckeditor/ckeditor5": "bart-sk/ckeditor5",
    "@formio/angular": "~5.1.1",
    "@ngrx/effects": "~12.4.0",
    "@ngrx/store": "~12.4.0",
    "@sentry/angular": "~6.13.3",
    "@sentry/tracing": "~6.13.3",
    "@syncfusion/ej2-angular-documenteditor": "~19.3.45",
    "angular-email-editor": "~0.9.0",
    "core-js": "~3.18.3",
    "create-hmac": "~1.1.7",
    "croppie": "~2.6.5",
    "dom-autoscroller": "~2.3.4",
    "dwt": "~17.1.12",
    "file-saver": "~2.0.5",
    "formiojs": "~4.13.7",
    "lodash-es": "~4.17.21",
    "luxon": "~2.0.2",
    "md5": "~2.3.0",
    "moment": "~2.29.1",
    "moment-timezone": "~0.5.33",
    "ngx-clipboard": "~14.0.1",
    "ngx-stripe": "~12.5.0",
    "node-interval-tree": "~1.3.3",
    "normalize.css": "~8.0.1",
    "pdfmake": "~0.2.2",
    "perfect-scrollbar": "~1.5.2",
    "resize-observer-polyfill": "~1.5.1",
    "rrule": "~2.6.8",
    "rxjs": "~6.6.7",
    "socket.io-client": "~4.3.0",
    "sortablejs": "~1.14.0",
    "trust1connector": "~3.0.0",
    "tslib": "~2.3.1",
    "xlsx": "~0.17.3",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "~12.1.3",
    "@angular-devkit/build-angular": "~12.2.10",
    "@angular-eslint/builder": "~12.5.0",
    "@angular-eslint/eslint-plugin": "~12.5.0",
    "@angular-eslint/eslint-plugin-template": "~12.5.0",
    "@angular-eslint/schematics": "~12.5.0",
    "@angular-eslint/template-parser": "~12.5.0",
    "@angular/cli": "~12.2.10",
    "@angular/compiler-cli": "~12.2.10",
    "@angular/language-service": "~12.2.10",
    "@ngrx/store-devtools": "~12.4.0",
    "@ngtools/webpack": "~12.2.10",
    "@sentry/cli": "~1.69.1",
    "@stripe/stripe-js": "~1.19.1",
    "@testing-library/angular": "~10.11.0",
    "@testing-library/user-event": "~13.3.0",
    "@types/core-js": "~2.5.5",
    "@types/create-hmac": "~1.1.0",
    "@types/croppie": "~2.6.1",
    "@types/dwt": "~16.1.2",
    "@types/file-saver": "~2.0.3",
    "@types/googlemaps": "~3.43.3",
    "@types/jasmine": "~3.9.1",
    "@types/jasminewd2": "~2.0.10",
    "@types/karma": "~6.3.1",
    "@types/lodash-es": "~4.17.5",
    "@types/md5": "~2.3.1",
    "@types/mocha": "~9.0.0",
    "@types/modernizr": "~3.5.3",
    "@types/node": "~16.11.0",
    "@types/pdfmake": "~0.1.19",
    "@types/sortablejs": "~1.10.7",
    "@types/svg-sprite-loader": "~3.9.4",
    "@types/webpack-dev-server": "~4.3.1",
    "@types/webpack-env": "~1.16.3",
    "@types/youtube": "~0.0.46",
    "@typescript-eslint/eslint-plugin": "~5.0.0",
    "@typescript-eslint/parser": "~5.0.0",
    "chalk": "~4.1.2",
    "codelyzer": "~6.0.2",
    "cross-env": "~7.0.3",
    "eslint": "~8.0.1",
    "eslint-config-prettier": "~8.3.0",
    "eslint-plugin-ngrx": "~1.46.2",
    "eslint-plugin-prettier": "~4.0.0",
    "eslint-plugin-rxjs": "~3.3.7",
    "eslint-plugin-rxjs-angular": "~1.0.6",
    "husky": "~7.0.2",
    "is-docker": "~3.0.0",
    "jasmine": "~3.10.0",
    "jasmine-core": "~3.10.0",
    "jasmine-reporters": "~2.5.0",
    "jasmine-spec-reporter": "~7.0.0",
    "junit": "~1.4.9",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "~1.7.0",
    "karma-junit-reporter": "~2.0.1",
    "karma-mocha-reporter": "~2.2.5",
    "karma-parallel": "~0.3.1",
    "karma-selenium-webdriver-launcher": "~0.0.4",
    "lint-staged": "~11.2.3",
    "mobile-detect": "~1.4.5",
    "moment-locales-webpack-plugin": "~1.2.0",
    "moment-timezone-data-webpack-plugin": "~1.5.0",
    "ngx-i18nsupport": "~0.17.1",
    "prettier": "~2.4.1",
    "protractor": "~7.0.0",
    "protractor-beautiful-reporter": "~1.3.6",
    "protractor-fail-fast": "~3.1.0",
    "sass": "~1.43.2",
    "source-map-support": "~0.5.20",
    "stylelint": "~13.13.1",
    "stylelint-config-prettier": "~9.0.3",
    "stylelint-config-standard": "~22.0.0",
    "svg-sprite-loader": "~6.0.9",
    "svg-transform-loader": "~2.0.13",
    "svgo": "~2.7.0",
    "svgo-loader": "~3.0.0",
    "typescript": "~4.3.5",
    "url-loader": "~4.1.1",
    "xliffsplit": "KrakenTyio/xlifsplit"
  }

.eslintrc.json

{
"root": true,
"ignorePatterns": ["projects/**/*"],
"overrides": [
  {
    "files": ["*.ts"],
    "parserOptions": {
      "project": ["tsconfig.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
      "createDefaultProgram": true
    },
    "extends": [
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/recommended-requiring-type-checking",
      "plugin:@angular-eslint/recommended",
      "plugin:@angular-eslint/template/process-inline-templates",
      "plugin:rxjs/recommended",
      "plugin:ngrx/recommended",
      "plugin:prettier/recommended"
    ],
    "plugins": ["rxjs", "rxjs-angular", "ngrx"],
    "rules": {
      "no-console": [
        "error",
        {
          "allow": ["error"]
        }
      ],
      "dot-notation": "off",
      "@typescript-eslint/dot-notation": [
        "error",
        {
          "allowPrivateClassPropertyAccess": true,
          "allowProtectedClassPropertyAccess": true
        }
      ],
      "@typescript-eslint/explicit-module-boundary-types": "off",
      "@typescript-eslint/unbound-method": [
        "error",
        {
          "ignoreStatic": true
        }
      ],
      "@typescript-eslint/no-floating-promises": "off",
      "@angular-eslint/component-max-inline-declarations": [
        "error",
        {
          "animations": 20,
          "styles": 8,
          "template": 25
        }
      ],
      "@angular-eslint/component-selector": [
        "error",
        {
          "type": "element",
          "prefix": "",
          "style": "kebab-case"
        }
      ],
      "@angular-eslint/directive-selector": [
        "error",
        {
          "type": "attribute",
          "prefix": "",
          "style": "camelCase"
        }
      ],
      "@angular-eslint/prefer-on-push-component-change-detection": "warn",
      "rxjs-angular/prefer-takeuntil": "warn",
      "prettier/prettier": "off"
    }
  },
  {
    "files": ["*.html"],
    "extends": ["plugin:@angular-eslint/template/recommended", "plugin:prettier/recommended"],
    "rules": {
      "@angular-eslint/template/i18n": [
        "off",
        {
          "checkId": true,
          "checkText": true,
          "checkAttributes": false
        }
      ],
      "@angular-eslint/template/conditional-complexity": [
        "warn",
        {
          "maxComplexity": 10
        }
      ],
      "@angular-eslint/template/cyclomatic-complexity": [
        "warn",
        {
          "maxComplexity": 10
        }
      ],
      "@angular-eslint/template/no-positive-tabindex": "warn",
      "@angular-eslint/template/use-track-by-function": "warn",
      "@angular-eslint/template/no-call-expression": "warn",
      "prettier/prettier": "off"
    }
  }
]
}

[nukithelegend]

Same here

[aladdin-add]

@KrakenTyio @rudivanbiljon, what's the output running npm ls @typescript-eslint/parser @typescript-eslint/eslint-plugin?

if it's all v5, please file an issue in ts-eslint repo.

[lsbyerley]

I am seeing this same issue with react testing library as a plugin after upgrading to v8.

Failed to load plugin 'testing-library' declared in 'package.json#overrides[0]': Class extends value undefined is not a constructor or null

anyone else seeing this too?

"eslintConfig": {
    "parser": "babel-eslint",
    "env": {
      "browser": true,
      "node": true,
      "jest": true
    },
    "plugins": [
      "testing-library",
      "jest-dom"
    ],
    ....

[hhsl]

I am seeing this same issue with react testing library as a plugin after upgrading to v8.

Failed to load plugin 'testing-library' declared in 'package.json#overrides[0]': Class extends value undefined is not a constructor or null

anyone else seeing this too?

"eslintConfig": {
    "parser": "babel-eslint",
    "env": {
      "browser": true,
      "node": true,
      "jest": true
    },
    "plugins": [
      "testing-library",
      "jest-dom"
    ],
    ....

It seems that ESLint-Plugin-Testing-Library is not fully ready for ESLint 8 yet.

Nonetheless you're able to install and try the latest alpha of ESLint-Plugin-Testing-Library to get your linter running. Try: npm i eslint-plugin-testing-library@5.0.0-alpha.10

This worked at least on my machine :)

[JanDez]

Got the same issue with the 8.0.1 version

[viktorrudi]

Got same issue with:
"@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "eslint": "^8.3.0",

[haxonadora]

Had the same issue on node version 13.6.0,
Works fine on 16.3.0

[jacksteamdev]

Confirming this issue on node version 14.15.1.
Works on 16.5.0 no problem.

[shellscape]

@nzakas please reopen, this issue has resurfaced.

[mdjermanovic]

eslint 8 supports the following versions of Node.js:

eslint/package.json

Lines 147 to 149 in 11c8580

	"engines": {
	"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
	}

typescript-eslint < 5 is not compatible with eslint 8.

If you still see this error with the latest versions of eslint and typescript-eslint on Node ^12.22.0 || ^14.17.0 || >=16.0.0, please open a new issue with all the details so we could investigate.