ESLint version 8.0.0 encountered an error while attempting to fetch the '@typescript-eslint' plugin

Hey there, I'm in need of some assistance. I encountered an error while trying to build a project.

Uh-oh! Something didn't go as planned! :(

ESLint: 8.0.0

TypeError: Failed to load plugin '@typescript-eslint' specified in 'src.eslintrc': Class extends value undefined is not a constructor or null Referenced from: src.eslintrc

package.json

    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^4.33.0",
        "@typescript-eslint/parser": "^4.33.0",
        "browserslist": "^4.17.3",
        "eslint": "^8.0.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-import": "^2.24.2",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-react": "^7.26.1",
        "prettier": "^2.3.2",
    }

.eslintrc

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

Answer №1

I followed these steps and everything worked perfectly for me

"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"eslint": "^8.1.0",

Make sure to update the above mentioned three packages

After that, navigate to the root of your project and execute this command to update the packages

npm install

Following these instructions will ensure everything functions smoothly

Answer №2

Encountered an issue while attempting to utilize version 4.x.x of the @typescript-eslint packages:

  "devDependencies": {
    ...
    "@typescript-eslint/eslint-plugin": "^4.29.1",
    "@typescript-eslint/parser": "^4.29.1",
    ...
}

Solution involved upgrading these to version "^5.3.1"

Answer №3

It seems like there may be a compatibility issue with ESM in one of the packages. To resolve this, ensure that all your dependencies are ESM compatible or lock eslint to version 7.32.0 and update the plugins accordingly (I also suggest adding TypeScript to your dev dependencies):

  "devDependencies": {
    ...
    "@typescript-eslint/eslint-plugin": "^5.6.0",
    "@typescript-eslint/parser": "^5.6.0",
    "eslint": "^7.32.0",
    "typescript": "^4.4.3"
  }

To achieve this, you can execute the following command:

npm i --save-dev typescript @typescript-eslint/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1075637c797e643d607c6577797e50253e263e20">[email protected]</a> @typescript-eslint/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26564754554354661308100816">[email protected]</a> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e5f3ece9eef4c0b7aeb3b2aeb0">[email protected]</a>

The --save-dev flag is used to install these as development dependencies since they are only needed for building and development purposes.

Answer №5

After upgrading my node version from 12.12.0 to 16.0.0, the problem was finally resolved. It seems that the issue was related to using an outdated node version.

Answer №6

After updating my node.js to version 16, everything is running smoothly now.

Answer №8

Running into problems? It might be due to the mismatch between the node and react versions you have installed. To resolve this, make sure your node version is compatible with React by updating it accordingly.

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

The http post request is functioning properly in postman, but it is not working within the ionic app

I am currently developing an app in ionic v3 within visual studio (Tools for Apache Cordova). On one of the screens in my app, I gather user information and send it to an API. However, I'm encountering an issue with the HTTP POST request that I'm ...

angulartypescripthttpionic3apache-cordova

Load a form using ajax and submit it using jQuery

For a while now, I have been facing challenges in figuring out what's going wrong with my code. The issue arises when I try to submit a form using jQuery that was loaded through ajax. The form loads perfectly fine within a div after invoking the ajax ...

phpjavascriptjqueryhtmlajax

Ways to transform an ISO string formatted date time into the following hour

I have a function that converts my date to RFC3339 format, but I want it to be converted to the upper time limit. Could someone please help me figure out how to convert it to the upper limit? const date = new Date(); // converting to RFC 3339 format ...

javascriptangulardatetime

Enhance your Vue.js 3 tables with sorting, filtering, and pagination capabilities using this custom component

After extensive research, I am still unable to find an updated Vue.js 3 component that offers sorting, filtering, and pagination for tables without the need for additional requests to a backend API. The options I have come across either seem outdated, are ...

javascriptvue.jsvuejs3

What is the best way to connect a series of checkboxes within a form utilizing Angular?

I created a form with checkboxes that allow users to select multiple options. However, when I submit the form, instead of receiving an array of objects representing the checked checkboxes, I'm not getting anything at all. Here is what I see in the co ...

javascriptangulartypescript

BottomNavigation wrapping React Router is failing to load the updated component

I'm struggling to understand why I can't seem to load the DMO page from a BottomNavigation component. Navigating to "/dom" works fine, but clicking the buttons doesn't do anything. The initial "/" loads perfectly. Any ide ...

javascriptreactjsmaterial-uireact-routerreact-router-dom

Select a checkbox automatically after receiving an ajax response

I am currently working with a form that contains multiple checkboxes like the one below: <label class="checkbox"> <input type="checkbox" id="user_ids_for_edit" name="user_ids_for_edit[]" data-toggle="checkbox" data-toggle="checkbox" value="14"&g ...

javascriptjqueryajaxcheckbox

Exploring the power of Nestjs EventEmitter Module in combination with Serverless functions through the implementation of Async

I am working on implementing an asynchronous worker using a serverless lambda function with the assistance of the nestjs EventEmitter module. The handler is being triggered when an event is emitted, but the function closes before the async/await call. I ...

javascriptnestjsserverless-frameworkeventemitter

Steps for interacting with a button of the <input> tag in Selenium using Python

As I attempt to complete a form submission, I encounter an issue where clicking the submit button does not produce any action. It seems that the problem lies with the button being tagged as <input>: <input type="submit" name="submit ...

javascriptpythonselenium

Requesting a resource using the HTTP GET method returned no data

Looking to process the response from an http-request using JavaScript? Check out this straightforward example below. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x ...

javascriptjqueryajax

The differences between using the opacity attribute in HTML and the opacity property

There are two distinct methods for adjusting opacity in HTML: <div opacity="0.5"></div> and <div style="opacity: 0.5;"></div> I am familiar with setting these values in JavaScript as well: div.setAttribute("opacity", 0.5); and ...

javascripthtmlcss

Issue with accessing custom method in subclass in Typescript

Recently delving into TypeScript, I decided to subclass Error and add a new method called getCode() in my MyError class. export class MyError extends Error { public code: number; constructor(code: number, message?: string) { super(mes ...

typescript

Utilizing the setState method within an 'async function with arguments' for handling onClick events

In my next.js app, I have a file named "temp.js" located in the /pages directory. This is the code inside temp.js: import React from 'react'; import {Button} from '@mui/material'; class SomeClass extends React.Component{ state={ ...

javascriptreactjsnext.js

Issue with CasperJS: The function this.waitForUrl is not defined and is causing an error

My casperJS script handles form filling, however I encountered the following error message: A TypeError occurred: 'undefined' is not a function (evaluating 'this.waitForUrl') I suspect this might be an issue with using an outdated ver ...

javascriptcasperjs

Tips for ensuring that CSS hover effects stay in place even when the page is scrolled

i'm having trouble with a project in React JS that I received from another team. I'm not very confident in my skills with React JS, and I'm facing an issue where a certain part of the page is supposed to change to red when hovered over. Howe ...

cssreactjstypescript

show the day of the week for a specific date saved in a MongoDB database

I need to create a report showing the total number of purchases for each day in the past week, formatted like this: { "sunday":30, "monday":20, ... } Each purchase in the database is structured as follows: { _id: 603fcb ...

javascriptnode.jsmongodbexpressserver

I'm a bit uncertain about the best placement for my progress bar component during the API call

Trying to grasp material ui I managed to implement the progress bar. Struggling with loading it until my data is fully loaded. Uncertain about where to place my progress bar component. Could you guide me on how to resolve this issue during API calls, so I ...

javascripthtmlreactjsreduxmaterial-ui

What is the best way to determine the width and height of text within a TextArea using JavaScript in an HTML document

Imagine this scenario: https://i.stack.imgur.com/cliKE.png I am looking to determine the size of the red box within the textarea. Specifically, I want to measure the dimensions of the text itself, not the dimensions of the entire textarea. The HTML code ...

javascripthtmlangular

The use of JSON.parse does not support parsing URL links

As a junior developer specializing in Javascript and Google Apps Script, I decided to enhance the functionality of my Google Sheets by tracking the last modification time of URLs stored in them. Although I attempted to create a script for this task, it see ...

javascriptjsonurlgoogle-apps-script

Communication between the Node development server and the Spring Boot application was hindered by a Cross-Origin Request

Here is the breakdown of my current setup: Backend: Utilizing Spring Boot (Java) with an endpoint at :8088 Frontend: Running Vue on a Node development server exposed at :8080 On the frontend, I have reconfigured axios in a file named http-common.js to s ...

javascriptjavanode.jsspringcross-domain