The type 'NextApiRequest' lacks the following attributes compared to type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'

Question

The type 'NextApiRequest' lacks the following attributes compared to type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'

An error has been identified in the code for a Next.js project below.

The error message reads: Argument of type 'NextApiRequest' is not assignable to parameter of type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'. Type 'NextApiRequest' is missing certain properties required by 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>', such as get, header, accepts, acceptsCharsets, and more.ts(2345)

import session from 'express-session'
import connectMongo from 'connect-mongo'

import type { NextApiRequest, NextApiResponse } from 'next'

const MongoStore = connectMongo(session)


export default function sessionMiddleware(req: NextApiRequest, res: NextApiResponse, next: any) {
  const mongoStore = new MongoStore({
    client: req.dbClient,
    stringify: false,
  })

  return session({
    secret: process.env.SESSION_SECRET ?? '',
    resave: false,
    saveUninitialized: false,
    store: mongoStore,
  })(req, res, next)
}

https://i.sstatic.net/Ei4x8.jpg

Any suggestions on how to resolve the issue mentioned above?

typescript session next.js

Answer 1

Answer №1

Blockquote

To tackle the issue at hand, I propose utilizing type union - a concept that can be explored further at https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html

import { RequestHandler, Request, Response } from 'express';
import { NextApiRequest, NextApiResponse } from 'next';

type NextApiRequestWithFormData = NextApiRequest &
  Request & {
    files: any[];
  };

type NextApiResponseCustom = NextApiResponse & Response;

export default function initMiddleware(middleware: RequestHandler) {
  return (
    req: NextApiRequestWithFormData,
    res: NextApiResponseCustom
  ): Promise<any> =>
    new Promise((resolve, reject) => {
      middleware(req, res, (result: any) => {
        if (result instanceof Error) {
          return reject(result);
        }
        return resolve(result);
      });
    });
}

You should find that the provided code is well-suited for your needs

import { RequestHandler, Request, Response } from 'express';
import { NextApiRequest, NextApiResponse } from 'next';

type NextApiRequestWithFormData = NextApiRequest &
  Request & {
    files: any[];
  };

type NextApiResponseCustom = NextApiResponse & Response;

Answer 2

Blockquote

To tackle the issue at hand, I propose utilizing type union - a concept that can be explored further at https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html

import { RequestHandler, Request, Response } from 'express';
import { NextApiRequest, NextApiResponse } from 'next';

type NextApiRequestWithFormData = NextApiRequest &
  Request & {
    files: any[];
  };

type NextApiResponseCustom = NextApiResponse & Response;

export default function initMiddleware(middleware: RequestHandler) {
  return (
    req: NextApiRequestWithFormData,
    res: NextApiResponseCustom
  ): Promise<any> =>
    new Promise((resolve, reject) => {
      middleware(req, res, (result: any) => {
        if (result instanceof Error) {
          return reject(result);
        }
        return resolve(result);
      });
    });
}

You should find that the provided code is well-suited for your needs

import { RequestHandler, Request, Response } from 'express';
import { NextApiRequest, NextApiResponse } from 'next';

type NextApiRequestWithFormData = NextApiRequest &
  Request & {
    files: any[];
  };

type NextApiResponseCustom = NextApiResponse & Response;

The type 'NextApiRequest' lacks the following attributes compared to type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'

Answer №1

Similar questions

Do not display large numbers within an HTML card

Is it possible to assign a property value to an object based on the type of another property?

The name 'Firebase' is not recognized by Typescript

"Encountered an issue with Next-Auth session returning as undefined in getServerSideProps using NextJS version 13.2

I am looking for an Angular Observable that only returns a single value without any initial value

The issue of Next.js 13.4 fetching failing to work properly in a production environment

Sources of the TypeScript library in WebStorm

Error in React due to custom pagination indexing issue

The never-ending cycle of an Angular dropdown linked to a function being repeatedly invoked

Pause and be patient while in the function that delivers an observable

TypeScript: a sequence of symbols representing a particular <type>

Is there a memory leak causing Node.js memory growth in the (system)?

Unusual class title following npm packaging

Next.js - useEffect is failing to run at all

To enable the "Select All" functionality in ag-grid's infinite scrolling feature in Angular 4, utilize the header check box

The error encountered during parsing the module for Next.js, Webpack, and TypeScript files (.ts, .tsx) was due to an unexpected token

Abort S3 file upload using ASW-SDK

Exploring the process of dynamically incorporating headers into requests within react-admin

Here's a way to resolve the issue: ReactDOM.render() - TS2345 error: Cannot assign type '() => Element' to type 'ReactElement' in the argument

Perform the subtraction operation on two boolean values using Typescript