When building Next.js, a warning for no-unused-vars is displayed even with eslint configured

Alert: The variable 'myparam' has been declared but never utilized. no-unused-vars

I have encountered the above warning in my file which includes a Zustand store implementation. However, I believe that this warning is not directly related to Zustand but rather due to the ESLint rules being enforced:

import { create } from 'zustand';


export type MyStoreState = {
  myVar: string[];
  myFunction: (
    myparam: string[],
  ) => void;
}

const useMyStore = create<MyStoreState>((set) => ({
  myVar: [],
  myFunction: (myparam) => {
    set({
      myVar: myparam,
    });
  }
}));

export default useMyStore;

Below is an excerpt from my .eslintrc.js file:

module.exports = {
  // Various ESLint configuration settings and rules defined here...
};

I am seeking assistance in understanding why I am receiving the "no-unused-vars" warning when I am clearly using 'myparam' within the function:

myFunction: (myparam) => {
    set({
      myVar: myparam,
    });
  }

The warning for "no-unused-vars" pertains specifically to 'myparam' within the MyStoreType declaration.

I have attempted to disable the "no-unused-vars" rule in the .eslintrc file, however, that does not seem to resolve the issue.

Answer №1

In summary

{
  "rules": {
-   "no-unused-vars": 'warn',
+   "no-unused-vars": "off",
+   "@typescript-eslint/no-unused-vars": "warn"
  }
}

While ESLint's built-in no-unused-vars rule is effective for JavaScript projects, it may not handle type declarations properly in TypeScript projects.

To address this issue, the @typescript-eslint/eslint-plugin offers a dedicated rule

@typescript-eslint/no-unused-vars
tailored for TypeScript projects. By using the @typescript-eslint:recommended preset, the no-unused-vars rule is automatically disabled and replaced with
@typescript-eslint/no-unused-vars
.

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

Incorporate a vibrant red circle within a tab of the navigation bar

I'm looking to incorporate a red dot with a number into a messaging tab to indicate new messages. Below is the HTML code: <ul class="nav pw-nav pw-nav--horizontal"> <li class="nav-item"> <a class="nav ...

Fulfill the promise once all map requests have been completed

Currently, my focus is on developing a bookmark page that retrieves bookmark results with the respective restaurant IDs. Once the response is mapped, I populate an array with objects. My objective is to ultimately resolve the entire array in order to mani ...

Child component experiencing issues with Materialize Pagination and Sorting functionalities not functioning

New to materialize pagination and currently working on the hierarchy below: app modules > list > list.component app.component Implemented a sample code example in app.component which worked perfectly. However, encountered issues when trying to imp ...

Issue encountered while importing TypeScript files from an external module in a Next.js project

Encountering an issue within my Next.js project with the following project structure: ├── modules/ │ └── auth/ │ ├── index.ts │ ├── page.tsx │ └── package.json └── nextjs-project/ ├─ ...

Exporting modules/namespaces to the window object in TypeScript

I have experience building APIs and applications in ES2015, but I am still learning the best practices for TypeScript. Can someone assist me with this challenge? Suppose I am creating an API/SDK for a shop. The objective is for the user to include my js f ...

Setting cursor position in input field when navigating with arrow keys: What are the ways to achieve accessibility?

I have implemented arrow key navigation in a table, allowing navigation with the up, down, left, and right arrow keys. How can I ensure that the cursor always stays on the right side of the input field during navigation? Check out my Stackblitz example he ...

Is the validation for the 'prop' property missing in props?

Seeking assistance with react's forwardRef feature. Currently encountering errors related to missing props validation in FadeContents. Is there a way to resolve this issue? It seems like the props need to be defined somewhere in order to be used withi ...

Issue: Unable to initialize (typescript) as an error appears. It is not possible to retrieve the property 'getExecutingFilePath' as it

After setting up a new Angular2 project using npm, I was able to successfully run it via the node command prompt with ng serve. However, when attempting to run it from the console in IntelliJ IDEA (version 2016.3.4), I encountered an error message: Erro ...

Employing Bazel in conjunction with Lerna and Yarn workspaces

It seems that a lot of people are currently utilizing lerna and/or yarn workspace. I'm thinking about either transitioning from them to Bazel, or perhaps integrating them with Bazel in conjunction with an example project for guidance. Take for insta ...

Why does axios.postForm seem to be functioning rather than axios.post?

I'm having trouble logging in using an API hosted on a webhost. I noticed that my code only works with axios.postForm and not with axios.post. What exactly is axios.postForm? Also, I need to retrieve data from the API, but it seems to only work with a ...

Creating a Next.JS Link that opens a new tab for internal URLs while avoiding redirection to external URLs

Currently, I am working on a project component for my homepage that showcases a specific project. The goal is to have the entire component redirect to the project page when clicked, except when the user clicks on the GitHub icon. In that scenario, I want t ...

Can TypeScript be used to generate a union type that includes all the literal values from an input string array?

Is it feasible to create a function in TypeScript that takes an array of strings and returns a string union? Consider the following example function: function myfn(strs: string[]) { return strs[0]; } If I use this function like: myfn(['a', &a ...

Using Next.js to Retrieve JSON Data and Render it in Components

I want to refactor the MainMenu function and getStaticProps from index.js into separate components. Here is my current index.js page that is functioning correctly. #index.js import Link from 'next/link'; function MainMenu({ menuLists }) { re ...

Ensuring that a TypeORM column has been updated

Currently, I am utilizing TypeORM with the ActiveRecord design pattern and have created this entity: @Entity() export class User { @PrimaryGeneratedColumn() public id: number; @Column() public username: string; @Column() public password: stri ...

Integrating Angular into your current project

Currently working on a project that involves migrating from ASP.NET to Angular. While the transition is ongoing, we are interested in integrating Angular into our existing ASP.NET project. Has anyone had experience with this and can offer guidance on how ...

The Angular Material date picker's keyboard input format is functional only in Chrome

I'm facing a challenge with the date picker component from Angular Material. When I try to manually type in a date like "2019.12.20" instead of selecting it, the input only works in Google Chrome. But when I tested it on Edge and Firefox, the date val ...

Vercel: Operation exceeded time limit of 10.01 seconds

After deploying my Next.js application for a software engineering boot camp on Vercel, I encountered a 504 error on my API routes. Despite searching online, I couldn't find a solution to this issue. Reviewing the real-time logs on my Vercel dashboard ...

Testing the window object using Jest

I have created a function that simulates a hostname. This function is defined before the actual test, prior to the describe block. const mockHost = (hostname: string) => { global.window = Object.create(window); Object.defineProperty(window, ' ...

The variable 'isSideBarOpen' is not a recognized property on the object 'AppComponent'

This is the HTML code snippet for my component: <div> <mat-sidenav-container class="main-container"> <mat-sidenav #sideBarRef opened mode="side" [(opened)]='isSideBarOpen'> <mat-nav-list> ...

Encountering a type error with React Navigation 5 while transitioning between stack screens

I have encountered some TypeScript errors while using react-navigation 5. It seems that I might be making mistakes in how I am typing things or structuring the app, but I'm uncertain about the exact issue. I started off by following these guides from ...