Issue of false positive with no-shadow when defining a TypeScript enum within a JHipster application

How can I effectively use an enum in my application?

export const enum typeEnum {
  TVY = 'TVY',

  USER = 'USER',
}

During the npm run webpack:build process, I encountered the following error :

12:111 error 'typeEnum' is already declared in the upper scope no-shadow

I found various resources suggesting that adding the following to the ESLint rules could resolve this issue :

  "no-shadow": "off",
  "@typescript-eslint/no-shadow": "error"

To address this, I updated the .eslintrc.json file with the following configuration:

{
  "plugins": ["@typescript-eslint/tslint"],
  "extends": ["jhipster"],
  "parserOptions": {
    "project": "./tsconfig.base.json"
  },
  "rules": {
    "@typescript-eslint/tslint/config": [
      "error",
      {
        "lintFile": "./tslint.json"
      }
    ],
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "args": "after-used",
        "ignoreRestSiblings": false
      }
    ],
    "@typescript-eslint/no-non-null-assertion": "off",
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": "error"
  }
}

However, now I am encountering a new error during npm run webpack:build :

myPath\src\main\webapp\app\vendor.ts [INFO] 1:1 error Definition for rule '@typescript-eslint/no-shadow' was not found @typescript-eslint/no-shadow

Do you have any suggestions on how I can address this issue?

Thank you,

Manuela

Answer №1

It turns out that in order to resolve the issue, you must disable the standard eslint rule and replace it with a TypeScript-specific value.

"no-shadow": "off",
"@typescript-eslint/no-shadow": ["error"],

(I personally encountered this issue, made the suggested change, and it resolved the problem for me)

Answer №2

The issue is indicating that there is another enum with the same name located on a higher level (likely in the global scope). Consider renaming your enum and revisiting.

On a side note, disabling rules is not recommended. TypeScript/JavaScript linting tools point out areas where your code may have issues. It's best practice to address these problems in your code rather than simply ignoring the linter warnings.

Answer №3

The solution involved simply adding the following line:

 "no-shadow": "off" 

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 Mongoose connection is missing essential properties from the Mongodb database, resulting in a Typescript error

In my current setup, I am using Typescript and Node.js, along with a combination of Mongoose and Typegoose for defining models. Below is the function I use to connect to my database: import mongoose from "mongoose"; import { Db } from "mongodb"; import con ...

React TypeScript: The properties of 'X' are not compatible. 'Y' cannot be assigned to 'Z' type

I am currently working on a React-TypeScript application, specifically creating a component for inputting credit card numbers. My goal is to have the FontAwesome icon inside the input update to reflect the brand image as the user enters their credit card n ...

How can one determine if a background image has successfully loaded in an Angular application?

In my Angular 7 application, I am displaying a background image in a div. However, there are instances when the link to the image is broken. The way I bind the image in my HTML is as follows: <div [ngStyle]="{'background-image': 'url(&a ...

The Angular HttpClient Service will exclusively provide responses that have a status code of 200

I'm facing an issue with my login component where it calls an http client service to send a request to the server for logging in. Everything works smoothly when I enter valid credentials, but if I input wrong credentials, the service doesn't seem ...

Nestjs struggles with resolving dependencies

Having trouble finding the issue in my code. (I'm still new to nestjs and trying to learn by working on some apps). The console log is showing the following error: Nest can't resolve dependencies of the UrlsAfipService (?). Please ensure tha ...

What is the process for setting the value of a TextField based on a Dropdown Selection?

I have a question regarding the code snippet below. I am wondering how to set the value of a specific TextField based on the selected item in a Dropdown component named ChildComponent. import * as React from "react"; import ChildComponent from './Ope ...

Include required "user" after middleware in Express with Typescript and Passport setup

I find myself constantly having to include code like if (!req.user) return res.status(401).send() The first solution that comes to mind is creating an express middleware for this. However, even though I can prevent non-logged in users from accessing the r ...

The primary origin of TypeScript is derived from the compiled JavaScript and its corresponding source map

Being new to sourcemaps and typescript, I am faced with a project that has been compiled into a single javascript file from multiple typescript files. The files available to me are: lib.js (the compiled js code of the project) lib.js.map (the source map ...

Utilizing the output of one function as an input parameter for another function: A guide

Having this specific shape const shape = { foo: () => 'hi', bar: (arg) => typeof arg === 'string' // argument is expected to be a string because foo returns a string } Is there a way to connect the return type of foo to the ...

Add a hyperlink within a button element

I am looking to add a route to my reusable 'button' component in order to navigate to another page. I attempted using the <Link> </Link> tags, but it affected my CSS and caused the 'button' to appear small. The link works if ...

What is the best way to determine Prisma types across various projects?

My current project has the following structure: dashboard -- prisma-project-1 -- prisma-project-2 -- client-of-prisma-project-1-and-prisma-project-2 This dashboard is designed to merge data from two separate databases and display them in a meaningful w ...

What is the method to access a component from a module that has been imported into the app module?

We are currently working on a project that has the following hierarchy. app/ ├── app.component.html ├── app.component.ts ├── app.module.ts <--moduleA and moduleB is imported here ├── app-routing.module.ts ├── moduleA/ ...

Retrieve the current state of a mat-checkbox that is dynamically generated by clicking on its associated label

Trying to transfer the state of a dynamically generated checkbox to a method triggered by clicking the label. Here's the HTML code: <div *ngFor="let label of consent.labels" style="flex-direction: column"> <div [ngClass ...

What steps should be taken to enable SCSS in Jest for unit testing in TypeScript Next.js?

I am facing an issue with the scss import in my project. I have attempted to solve it by using mockup and identity-obj-proxy, but neither of them seems to work. I suspect that there might be a problem with my regex expression. The specific error arises fr ...

Establish a connection between a React variable and state management

In my codebase, I have an external module file named Task.ts. It contains the following: const taskList: Task[] = []; Class Task { ... } export { Task, taskList } The taskList is a list of Task objects that can be modified by the Task class. Now, i ...

Guide on accessing the value within an array located inside an object

Hello everyone, I'm new to Angular and I need some help accessing the values inside objects. Specifically, I'm trying to access the SuccessCount in this Array. Here is my attempt: goodResponse=[ {compId: 1, companyName: "A", pendingCount: 0 ...

Error message indicating that the function is not defined within a custom class method

I successfully transformed an array of type A into an object with instances of the Person class. However, I'm facing an issue where I can't invoke methods of the Person class using the transformed array. Despite all console.log checks showing tha ...

tips for accessing the useState value once it has been initialized

When using the state hook in my code, I have: const [features, setFeatures] = useState([]) const [medicalProblem, setMedicalProblem] = useState([]) The medicalProblem variable will be initially populated with a response from an API call: useEf ...

Exploring the contrast of && and ?? in JavaScript

My current focus is on utilizing the Logical AND && and Nullish coalescing operator ?? in handling conditional rendering of variables and values. However, I find myself struggling to fully comprehend how these operators function. I am seeking clar ...

Transformation of Python code into Blockly blocks

As the founder of edublocks.org, I am interested in adding Python to Blocks functionality on the platform. At the moment, users can only transition from Blocks to Python. Is there anyone who has experience with this and can provide guidance on how to achi ...