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:
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
}
如果我遗漏了一些要提及的内容,请告诉我。预先感谢!
自从我将 NodeJS 从 v18 升级到 v20.13.1 以来,我也遇到了类似的问题
它来自这行给你的: (全局).payload
你找到解决这个问题的方法了吗?