Encountering a challenge when upgrading to eslint version 9.0.0

Encountering an issue while trying to upgrade eslint to version 9.0.0.

⋊> ~/A/fusion on turborepo ⨯ bun lint                                                          22:21:58
$ eslint packages/*/src/**/*

Oops! Something went wrong! :(

ESLint: 9.0.0

ConfigError: Config (unnamed): Key "plugins": Cannot redefine plugin "@typescript-eslint".
    at rethrowConfigError (/Users/aleksandrkireev/Apps/fusion/node_modules/@humanwhocodes/config-array/api.js:225:8)
    at /Users/aleksandrkireev/Apps/fusion/node_modules/@humanwhocodes/config-array/api.js:1018:5
    at Array.reduce (<anonymous>)
    at FlatConfigArray.getConfig (/Users/aleksandrkireev/Apps/fusion/node_modules/@humanwhocodes/config-array/api.js:1014:39)
    at FlatConfigArray.isFileIgnored (/Users/aleksandrkireev/Apps/fusion/node_modules/@humanwhocodes/config-array/api.js:1046:15)
    at /Users/aleksandrkireev/Apps/fusion/node_modules/eslint/lib/eslint/eslint-helpers.js:514:38
    at Array.forEach (<anonymous>)
    at findFiles (/Users/aleksandrkireev/Apps/fusion/node_modules/eslint/lib/eslint/eslint-helpers.js:503:11)
    at async ESLint.lintFiles (/Users/aleksandrkireev/Apps/fusion/node_modules/eslint/lib/eslint/eslint.js:846:27)
    at async Object.execute (/Users/aleksandrkireev/Apps/fusion/node_modules/eslint/lib/cli.js:461:23)
⋊> ~/A/fusion on turborepo ⨯

I'm not utilizing the @humanwhocodes package, but it appears that another package is using it.

Dependencies:

  "dependencies": {
    "alor-api": "1.0.47",
    "axios": "1.6.8",
    "cache-manager": "5.5.1",
    "core-js": "3.36.1",
    "create-hmac": "1.1.7",
    "crypto-hash": "3.0.0",
    "date-fns": "^2.28.0",
    "eslint-plugin-react-hooks": "4.6.0",
    "moment": "2.30.1",
    "msgpack5": "6.0.2",
    "node-cron": "3.0.3",
    "node-fetch": "3.3.2",
    "node-yaml-config": "1.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-error-overlay": "6.0.11",
    "reflect-metadata": "0.2.2",
    "regenerator-runtime": "0.14.1",
    "request": "2.88.2",
    "swr": "2.2.5",
    "tslib": "2.6.2",
    "winston": "^3.8.2",
    "winston-daily-rotate-file": "^4.7.1",
    "winston-loki": "^6.0.6",
    "winston-telegram": "^2.6.0"
  },
  "devDependencies": {
...

<p><code>eslint.config.js:


import globals from "globals";
import tseslint from "typescript-eslint";
import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";

import path from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import pluginJs from "@eslint/js";

// mimic CommonJS variables -- not needed if using CommonJS
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({baseDirectory: __dirname, recommendedConfig: pluginJs.configs.recommended});

export default [
...
];
typescripteslintbun

Answer №1

It seems like the problem arises from redundant inclusion of @typescript-eslint. This occurs when you use both 

compat.extends("standard-with-typescript")
and 
tseslint.configs.recommendedTypeChecked
.

If you refer to recommendedTypeChecked here: https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/recommended-type-checked.ts

You'll notice that it extends the base config: https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/base.ts

This already includes the @typescript-eslint plugin.

I'm not entirely certain about the issue related to the FlatCompat scenario, but it likely results in unnecessary duplicate inclusion of the @typescript-eslint plugin, leading to the error message you're experiencing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Inheritance of Generic Types in TypeScript

Could someone assist me in understanding what is incorrect with the code snippet provided here? I am still learning Typescript. interface ICalcValue { readonly IsNumber: boolean; readonly IsString: boolean; } interface ICalcValue<T> ex ...

typescriptinheritancetypescript-generics

Using Typescript: Utilizing only specific fields of an object while preserving the original object

I have a straightforward function that works with an array of objects. The function specifically targets the status field and disregards all other fields within the objects. export const filterActiveAccounts = ({ accounts, }: { accounts: Array<{ sta ...

typescript

How can I inform Typescript that an interface will exclusively consist of defined members?

My interface looks like this interface Person { name?:string; age? :number; gender?:string } I need to reuse the same interface type, but with a modification indicating that all members will never be undefined. The updated version would look like this: ...

typescript

Angular with NX has encountered a project extension that has an invalid name

I am currently using Angular in conjunction with nx. Whenever I attempt to execute the command nx serve todos, I encounter the following error: Project extension with invalid name found The project I am working on is named: todos. To create the todos app ...

angulartypescriptnrwl-nx

Using Angular 4 to monitor changes in two-way binding properties

Recently, I developed a unique toggle-sorting component that examines if the current sorting parameters align with its sorting slug and manages clicks to reflect any changes. // toggle-sorting.component.ts @Input() sortingSlug: string; @Input() currSorti ...

angulartypescript

Struggling to get Tailwind typography to play nice with a multi-column React application shell

I'm currently working on a React application with TypeScript and trying to integrate one of Tailwind's multi-column application shells (this specific one). I want to render some HTML content using Tailwind Typography by utilizing the prose class. ...

reactjstypescripttailwind-csstailwind-ui

Typescript error: The property "Authorization" is not found in the type HeadersInit

As I utilize the npm module node-fetch, I have a helper function specifically designed to facilitate authorized requests to a third-party service. This function essentially acts as middleware by incorporating the Authorization header. async function makeAu ...

typescriptnode-fetch

Unable to display information stored in the Firebase database

I am struggling with a frustrating issue. My goal is to showcase the information stored in the Firebase database in a clear and organized manner, but I'm having trouble achieving this because it's being treated as an object. getData(){ firebas ...

angulartypescriptfirebasefirebase-realtime-database

Create a class where each method is required to be a "getter" function

Is it feasible to establish a class in which all methods must be getters? Possible Implementation: class Example implements AllGetters { get alpha () { } get beta () { } } Not Acceptable: class Example implements AllGetters { get alpha () { ...

typescript

elimination of nonexistent object

How can I prevent releasing data if two attributes are empty? const fork = [ { from: 'client', msg: null, for: null }, { from: 'client', msg: '2222222222222', for: null }, { from: 'server', msg: 'wqqqqqqqq ...

javascriptarraystypescriptobject

What is the reason for TypeScript's decision to lazily evaluate constrained class generics?

I am experiencing confusion with the TypeScript declaration provided below. class C<T extends {}> { method() { type X = T extends {} ? true : false; // ^? type X = T extends {} ? true : false; // Why is X not `true`? ...

typescript

What is the process for obtaining an AccessToken from LinkedIn's API for Access Token retrieval?

We have successfully implemented the LinkedIn login API to generate authorization code and obtain access tokens through the browser. Click here for image description However, we are looking to transition this functionality to an ajax or HTTP call. While w ...

javascriptnode.jsangulartypescript

How to detect a click event in any area of an Angular2

Hey there, I'm new to typescript and angular 2 and I've encountered an error in my code. Can someone lend me a hand in fixing this? import { Component, HostListener } from '@angular/core' export class TooltipComponent { public sh ...

javascriptangulartypescript

Exploring the differences between Typescript decorators and class inheritance

I find myself puzzled by the concept of typescript decorators and their purpose. It is said that they 'decorate' a class by attaching metadata to it. However, I am struggling to understand how this metadata is linked to an instance of the class. ...

typescriptangulardecorator

Compiler raises concerns about potential undefined values in nested objects

In my code snippet, I am experiencing an issue with TypeScript when I try to access an object property after checking for its existence. The sample code can be found here (when strictNullChecks is enabled). 1. let boolVar: number | undefined; 2. 3. if ...

typescript

The classification of a property is determined by the types of the other properties present

I am trying to figure out a way in Typescript to create a general component that takes a prop called component, with the remaining props being specific to that component. How can I achieve this? For example: <FormField component={Input} ... /> Thi ...

reactjstypescriptreact-native

How come I am unable to define global electron variables in my HTML when using Typescript?

I am currently working on a personal project using Electron and Typescript. Both my Main.js and Renderer.js files are in Typescript and compiled. My issue is with the "remote" variable in my template (main.html). While it works within the template, I can&a ...

typescriptwebpackelectron

Tips for utilizing generics to determine the data type of a property by its name

I am seeking a method to determine the type of any property within a class or a type. For instance, if I had the classes PersonClass and PersonType, and I wanted to retrieve the type of the nationalId property, I could achieve this using the following cod ...

typescriptgenericstypescript-typings

Uncovering the origins of computed object keys in TypeScript

I am currently working on a project where I need to easily define and use new plugins using TypeScript in my IDE. My folder structure looks like this: src │ ... └── plugins └── pluginA | index.ts └── pluginB | index. ...

typescript

What steps do I need to take to integrate the Firebase Admin SDK into my Angular project?

Is there a way to integrate Firebase Admin SDK into my Angular application? Currently, I am using Firebase Authentication services in my application and everything I need for user registration and authentication is handled by Angularfire2. I've read ...

angulartypescriptfirebaseexpressfirebase-authentication