Handling linting errors for getInitialProps return type in NextJS with Typescript

I've been grappling with this problem for an extended period, and despite numerous attempts, I haven't been able to resolve it.

My issue revolves around a basic page named one.tsx. Its structure is as follows:

The linting error that's plaguing me reads:

Missing return type on function.eslint(@typescript-eslint/explicit-function-return-type)

This is how my tsconfig.json file looks:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "checkJs": false,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    ... (omitted for brevity)
... (other sections omitted)

Here is the console error message:

frontend    | [ event ] build page: /one
frontend    | [ warn ]  ./pages/one.tsx
frontend    | ...

To mitigate the issue, I manually specified a return type, like so:

TestServer.getInitialProps = async (): Promise<Props> => {

Despite having the next-env.d.ts file in place and being able to navigate to the NextPage type definition in VSCode, eslint-typescript fails to recognize it. What could be causing this discrepancy?

Your insights are greatly appreciated.

Answer №1

To successfully handle your backend response, make sure to wrap it in a Promise.

One.getInitialProps = async (): Promise<Props> => ({ backendResponse: 'example' });

Answer №2

According to the guidelines stated in this source, the rule must be followed or disabled! Additionally, it appears that your query may be a duplicate of this post.

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 process of converting TypeScript to JavaScript in Angular 2?

Currently diving into the world of Angular 2 with TypeScript, finding it incredibly intriguing yet also a bit perplexing. The challenge lies in grasping how the code we write in TypeScript translates to ECMAScript when executed. I've come across ment ...

Why am I encountering this rendering issue when passing data to the ReactTable component?

The following code snippet represents the parent component containing an array of columns and data. const TransactionTable = () => { const columns = useMemo( () => [ { Header: 'DATE/TIME', accessor: &apos ...

Working with e.charcode in TypeScript allows for easy access to

I'm having trouble understanding why this code snippet is not functioning as expected. const addRate = (e: { charCode: KeyboardEvent }) => { if (e.charCode >= 48) { ... } } The error message I receive states: 'Operator '>=& ...

Determine the field's type without using generic type arguments

In my code, there is a type called Component with a generic parameter named Props, which must adhere to the Record<string, any> structure. I am looking to create a type that can accept a component in one property and also include a function that retu ...

What is the most effective method for pausing execution until a variable is assigned a value?

I need a more efficient method to check if a variable has been set in my Angular application so that I don't have to repeatedly check its status. Currently, I have a ProductService that loads all products into a variable when the user first visits the ...

Switching "this" keyword from jQuery to TypeScript

A piece of code is functioning properly for me. Now, I aim to incorporate this code into a TypeScript application. While I prefer to continue using jQuery, I am unsure how to adjust the use of this to meet TypeScript requirements. if ($(this).width() < ...

Struggling to understand the intricacies of MobX in conjunction with Next-Auth? Let

Below are the essential dependencies along with their versions from my package.json file: "mobx": "^6.5.0", "mobx-react": "^7.3.0", "next": "12.1.6", "next-auth": "4.2.1", &qu ...

BrowseSEO does not have the ability to read META tags within a Next.js React App

I have a website built with the Next.js framework. To optimize SEO, I have added unique <Meta/> tags in the <Head/> component from Next/Head on each page (index.tsx, titles/[title].tsx). However, when testing with a crawling site like BrowseSEO ...

How to retrieve the NgModel Object within a component file using TypeScript

I am currently utilizing [(ngModel)] for two-way binding. The structure in HTML is as follows - <input type="text" [(ngModel)]="emailInput" #toemail="ngModel" [email]="true" [style.color]="toemail.invalid && toemail.touched ? &a ...

Cannot upload the same file to both Spring and Angular twice

Having trouble uploading the same file twice. However, it works fine when uploading different files. Encountering an error under the Network tab in Chrome { timeStamp: ......, status: 417 error: 'Bad Request', message: 'Required reques ...

Leverage React.JS to iterate through arrays and objects, rendering data seamlessly - even within nested objects

Development of Category's Filter component Implementing the rendering of data from a nested array using React Js Although I attempted to render it as seen below, it is not displaying anything The main focus is on the rendering part only var selecte ...

Ways to dynamically apply styles to the component tag depending on the visibility of its content

Consider a scenario where you have a component with logic to toggle the visibility of its contents: @Component({ selector: 'hello', template: `<div *ngIf="visible"> <h1>Hello {{name}}!</h1></div>`, styles: [`h1 { fo ...

What steps should I take to troubleshoot a Next.js production build?

I am facing an issue with a bug (this one) that specifically occurs in production on the client side. In production, Next.js suppresses error messages and disables logging on the client side by default. This can make it challenging to troubleshoot issues ...

If the input is unmounted in react-hook-form, the values from the first form may disappear

My form is divided into two parts: the first part collects firstName, lastName, and profilePhoto, while the second part collects email, password, confirmPassword, etc. However, when the user fills out the first part of the form and clicks "next", the val ...

Develop interactive web applications using Typescript

Having difficulty compiling and executing the project correctly in the browser. The "master" branch works fine, but I'm currently working on the "develop" branch. It's a basic web project with one HTML file loading one TS/JS file that includes i ...

Discover the power of working with asynchronous values in objects using the latest @if syntax in Angular 17

Previously, we were able to chain multiple async operations using *ngIf directives in Angular. This allowed us to avoid repeating the async pipe in the template and instead reuse them as a single subscription. With the introduction of the new @if syntax in ...

What's the process for deducing the default generic parameter from a function type?

Is there a way to extract the default type parameter of a function in order to make this statement compile successfully? const fails: string = "" as ReturnType<<T = string>() => T>; ...

CPU usage spikes after launching a Cordova project in Visual Studio 2015 RTM

If you're looking for the source code of the project, you can find it at https://github.com/Yaojian/Ionic-TypeScript-Starter/. I decided to create a Visual Studio project by forking https://github.com/Justin-Credible/Ionic-TypeScript-Starter/ and fol ...

What is the best way to extract the ID from an event in TypeScript?

HTML Code: <ion-checkbox color="dark" checked="false" id="1on" (ionChange)="onTap($event)" ></ion-checkbox> TypeScript Code: onTap(e) { console.log(e); console.log(e.checked); } I am trying to retrieve the id of the checkbox. H ...

Sonar activated - Self-hosted runner limitation: unable to use npm for test coverage alongside Docker integration

Whenever I attempt to execute the (action checkout) on a self-hosted runner with npm run coverage and then after sonarqube, I encounter this error:" docker: Error response from daemon: pull access denied for 6cd1db, repository does not exist or may re ...