"ERROR (payload): TypeError: Cannot set property query of #<IncomingMessage> which has only a getter"

Question

Intro:

I am following a youtube video ie, Build a Complete Digital Marketplace with Next.js 14, React, tRPC, Tailwind using Payload CMS for admin dashboard.

As I followed his each and every step and i am sure the source code provided underneath is exactly same as in that video.

I searched a lot on google but i can't find a satisfactory solution especially for my case.

Issue:

When I setup all my code as in the video and run the final command yarn dev. His command worked properly but my command got the following error.

I'm a learner so I don't know what's the problem.

The video shows that the error is only in the server.ts file. By the way, I also compared my other files with him, i got no spelling or syntax mistake.

Here is the tutorial's error, He managed to fix that by commenting out some lines of code but when i did that i still got this error:

Video Link: https://youtu.be/06g6YJ6JCJU?list=PLM4aGCuV3nC_N-u8xpxtK4cbShVTr_49V&t=9087

I can only see a Loading Animation on this url http://localhost:3000/sell

But this url works fine: http://localhost:3000

Error:

Browser Screenshot

VS Code Terminal Error Screenshot

Code

Here is my code:

For src/server.ts :

import express from "express";
import { getPayloadClient } from "./get-payload";
import { nextApp, nextHandler } from "./next-utils";


const app = express();
const PORT = Number(process.env.PORT) || 3000;

const start = async () => {

  const payload = await getPayloadClient({
    initOptions: {
      express: app,
      onInit: async (cms) => {
        cms.logger.info(`Admin URL: ${cms.getAdminURL()}`);
      },
    },
  });

  app.use((req, res) => nextHandler(req, res));

  nextApp.prepare().then(() => {
    payload.logger.info("Next.js started");

    app.listen(PORT, async () => {
      payload.logger.info(
        `Next.js App URL: ${process.env.NEXT_PUBLIC_SERVER_URL}`
      );
    });
  });
};

start();

For src/payload.config.ts:

import { buildConfig } from "payload/config";
import { webpackBundler } from "@payloadcms/bundler-webpack";
import { mongooseAdapter } from "@payloadcms/db-mongodb";
import { slateEditor } from "@payloadcms/richtext-slate";
import path from "path";
import dotenv from "dotenv";

dotenv.config({
  path: path.resolve(__dirname, "../.env"),
});

export default buildConfig({
  serverURL: process.env.NEXT_PUBLIC_SERVER_URL || "",
  collections: [],
  routes: {
    admin: "/sell",
  },
  admin: {
    bundler: webpackBundler(),
    meta: {
      titleSuffix: "- DigitalHippo",
      favicon: "/favicon.ico",
      ogImage: "/thumbnail.jpg",
    },
  },
  rateLimit: {
    max: 2000,
  },
  editor: slateEditor({}),
  db: mongooseAdapter({
    url: process.env.MONGODB_URL!,
  }),
  typescript: {
    outputFile: path.resolve(__dirname, "payload-types.ts"),
  },
});

For src/get-payload.ts:

import dotenv from 'dotenv'
import path from 'path'
import type { InitOptions } from 'payload/config'
import payload, { Payload } from 'payload'

dotenv.config({
  path: path.resolve(__dirname, '../.env'),
})

let cached = (global as any).payload

if (!cached) {
  cached = (global as any).payload = {
    client: null,
    promise: null,
  }
}

interface Args {
  initOptions?: Partial<InitOptions>
}

export const getPayloadClient = async ({
  initOptions,
}: Args = {}): Promise<Payload> => {
  if (!process.env.PAYLOAD_SECRET) {
    throw new Error('PAYLOAD_SECRET is missing')
  }

  if (cached.client) {
    return cached.client
  }


  if (!cached.promise) {
    cached.promise = payload.init({
      secret: process.env.PAYLOAD_SECRET,
      local: initOptions?.express ? false : true,
      ...(initOptions || {}),
    })
  }

  try {
    cached.client = await cached.promise
  } catch (e: unknown) {
    cached.promise = null
    throw e
  }

  return cached.client
}

Please let me know if I missed something to mention. Thanks in Advance!