“错误(有效负载):TypeError:无法设置只有 getter 的 #<IncomingMessage> 的属性查询”

问题描述 投票:0回答:1

Intro:

我正在关注 YouTube 视频,即,使用 Next.js 14、React、tRPC、Tailwind 构建完整的数字市场,使用 Payload CMS 作为管理仪表板。

当我遵循他的每一步时,我确信下面提供的源代码与该视频中的完全相同。

我在谷歌上搜索了很多,但我找不到令人满意的解决方案,特别是对于我的情况。

Issue:

当我按照视频中的方式设置所有代码并运行最终命令时

yarn dev
。他的命令运行正常,但我的命令出现以下错误。

我是一名学习者,所以我不知道问题出在哪里。

视频显示错误仅存在于

server.ts
文件中。顺便说一句,我也将我的其他文件与他进行了比较,我没有发现拼写或语法错误。

这是教程的错误,他设法通过注释掉一些代码行来解决这个问题,但是当我这样做时,我仍然遇到这个错误:

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

我只能在这个网址上看到加载动画

http://localhost:3000/sell

但是这个网址工作正常:

http://localhost:3000

Error:

Browser Screenshot

VS Code Terminal Error Screenshot

Code

这是我的代码:

对于

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();

对于

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"),
  },
});

对于

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
}

如果我遗漏了一些要提及的内容,请告诉我。预先感谢!

reactjs typescript next.js runtime-error payload-cms
1个回答
0
投票

自从我将 NodeJS 从 v18 升级到 v20.13.1 以来,我也遇到了类似的问题

它来自这行给你的: (全局).payload

你找到解决这个问题的方法了吗?

© www.soinside.com 2019 - 2024. All rights reserved.