The gitlab CI is encountering an issue with the eslint warning

I am currently utilizing React with Typescript. I have configured eslint locally to treat unused variables as a warning.

Oddly enough, when I execute npm run build on my local machine, it works perfectly fine. However, in Gitlab CI, I am encountering the following error:

 npm run build
> [email protected] build
> react-scripts build
Creating an optimized production build...
Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.
Failed to compile.
[eslint] 
src/common/components/MAppBar/MAppBar.tsx
  Line 4:8:   'Divider' is defined but never used         no-unused-vars
  Line 4:8:   'Divider' is defined but never used         @typescript-eslint/no-unused-vars

If you wish to take a look at the Gitlab repository in question, you can find it here. The configurations for .eslintrc.js and .gitlab-ci.yml seem correct to me.

How can I instruct Gitlab CI to overlook this warning?

Note: My intention is to build the application to host it on Gitlab pages

typescriptgitlabgitlab-ci

Answer №1

In order to resolve this issue, you must ensure that the CI environment variable is set to false. Look at this line from the log you provided:

Warnings are being treated as errors due to process.env.CI = true.

To avoid GitLab CI from considering warnings as errors, it is necessary to define CI = "false" within the variables section of your '.gitlab-ci.yml' file ()

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

What is the best way to specify a function type that takes an argument of type T and returns void?

I am in search of a way to create a type that can accept any (x: T) => void function: let a: MyType; a = (x: number) => {}; // (x: number) => void a = (x: string) => {}; // (x: string) => void a = (x: SomeInterface) => {}; / ...

typescript

How to retrieve the value of a selected item in primeng using p-dropdown and angular

Encountering an issue when trying to send the selected item value while iterating over an array of strings like: "BMW", "FERRARI", "AUDI", "BENTLY" Here is the structure of my HTML: <p-dropdown optionLabel="type" [options]="cars" formControlName="name" ...

htmlangulartypescriptprimeng

What exactly are Discriminating Unions in the realm of Function Types?

I am struggling to differentiate between members of a discriminated union made up of function types. Take a look at the following example: type _NumFunc = (n: number) => string; type _StrFunc = (s: string) => string; interface NumFunc extends _NumFun ...

typescript

Is there a way to end my session in nextAuth on NextJS 14?

Recently, I've started using Typscript with a NextJS14 project that utilizes NextAuth for authentication. While there weren't any errors in the JavaScript version of my code, I encountered an error when working with TypeScript. This is a snippet ...

typescriptnext.jsnext-auth

Calculate the variance between two variables

I am facing a challenge where I have an object and the 'Hours' field is saved as a string. I am looking to convert this string into actual hours and then calculate the difference between the two variables. const groupSchedule=[ {"days":"sat" ...

javascriptnode.jstypescript

How to Utilize an Array from Observable Object in Angular 2 with ngFor and Async Pipe

I am currently learning about the utilization of Observables in Angular 2. Here is a snippet of code from a service I am working with: import {Injectable, EventEmitter, ViewChild} from '@angular/core'; import {Observable} from "rxjs/Observab ...

typescriptangularrxjsobservable

Angular 8 encountered a 404 (Not Found) error when trying to POST to http://localhost:4200/assets/data/students.json

I'm currently working on a project that involves fetching array data through HTTP and should also allow for the addition of new arrays using HTTP. However, every time I attempt to post a new array, I encounter the following error: POST http://local ...

angulartypescriptangular8

Encapsulating functions with multiple definitions in Typescript

Struggling with wrapping a function that can have multiple return types based on input parameters in Typescript. Imagine wanting a function to return ReturnA for VariantEnum.a and ReturnB for VariantEnum.b. Consider this implementation of sampleFunction: ...

typescript

Issue with Angular RxJs BehaviorSubject not updating correctly

I've encountered an issue while attempting to share a string value between sibling components (light-switch and navbar). The problem lies in the fact that the property themeColor fails to update when I emit a new value from my DataService. Below is t ...

angulartypescriptrxjs

Separate and handle multiple exceptions of the same instance individually

If I am facing the situation where multiple method calls to another class are possible, each of which could potentially throw the same exception that I am unable to modify, how can I handle each Exception separately without allowing the rest of the functio ...

javascripttypescriptexception

Is it considered valid in JavaScript or TypeScript to group values using (value1 || value2) for comparisons, and if it is, what is the reasoning behind

Does anyone know if using the || operator to group values while comparing a single variable is valid in the most recent versions of JavaScript or TypeScript? If not, what could be preventing this from becoming a valid syntactic sugar feature at some point? ...

javascripttypescriptsyntaxcomparisoncomparison-operators

What is the best way to retrieve the final value stored?

This is how I am using my Selector:- private loadTree() { this.loading = true; this.store.select(transitionListSelector).pipe().subscribe(data => { console.log(data); data.map(item => { console.log(item); this.tr ...

angulartypescriptreduxrxjsngrx

Tips for creating an interface in TypeScript that prevents access to uninitialized properties of a class

Interfaces still baffle me a bit. I understand that interfaces are typically used for public properties, but I want to create an interface that will prevent access to uninitialized properties. Currently, I am able to access this.material without any errors ...

typescriptclassinterface

Is there a way to receive a comprehensive report in case the deletion process encounters an error?

Currently, I am performing a delete operation with a filter based on 2 fields: const query = await Flow.deleteOne({ _id: flowId, permissions: currentUser!.id, }); After executing the delete operation, I inspect the query object to determine its su ...

node.jstypescriptmongodbexpressmongoose

There is no module.hot in Webpack for TypeScript

I am trying to implement Webpack HMR in a NodeJS project that is built using TypeScript. However, I am encountering an issue where module.hot is not available: @types/webpack-env defines: declare var module: __WebpackModuleApi.Module This conflict ...

node.jstypescriptwebpackwebpack-hmr

After clicking on the "Delete Rows" button in the table, a white color suddenly fills the background in Angular Material

When the dialog box pops up, you'll see a white background color: https://i.stack.imgur.com/EflOx.png The TypeScript code for this action can be found in config-referrals.component.ts openDialog(action, obj) { this.globalService.configA ...

angulartypescriptangular-materialmat-dialog

Issue encountered with redux-toolkit's createAsyncThunk functionality

Here is how I implemented the deleteDirectories method in redux: export const deleteDirectories = createAsyncThunk( "directories/deleteDirectories", async (id, thunkAPI) => { try { const response = await axios.delete(`${url}direc ...

reactjstypescriptredux-toolkit

What could be the reason for the lack of impact when assigning a [dateClass] in mat-calendar?

I've been trying to customize the appearance of specific days in the mat-calendar component from Angular Material, but I'm having trouble getting it to work. I discovered the dateClass property which seemed like the right solution, but no matter ...

angulartypescriptangular-materialangular-material-datetimepicker

To avoid TS2556 error in TypeScript, make sure that a spread argument is either in a tuple type or is passed to a rest parameter, especially when using

So I'm working with this function: export default function getObjectFromTwoArrays(keyArr: Array<any>, valueArr: Array<any>) { // Beginning point: // [key1,key2,key3], // [value1,value2,value3] // // End point: { // key1: val ...

javascriptarraystypescriptfunctionobject

Validity of Vue 3 Typescript properties checked during compilation and runtime

We are currently developing a Vue 3 component library, and as the project grows in scale, we have refactored it with TypeScript to improve the development experience. However, we are facing a challenge. Our library is being used by teams in different envir ...

typescriptvue.jsvuejs3