Setup Payload with existing Next.js project — require.extensions / Critical dependency problems

[hampallop]

Hi I tried to setup Payload to my existing Next.js and Supabase.

Setup

I followed the guide from a custom-server here.
So basically I have copied and configured these files from an example

• server.ts
• server.defaults.ts
• payload.config.ts
• getPayloads.ts
• tsconfig.server.json

With some customized in payload.config.ts to use postgresAdapter from @payloadcms/db-postgres.

Issue

On frontend Next.js I can run the server normally. But when I add a code to fetch the payload in Next.js app from these code

const payload = await getPayloadClient();
  const payloadResponse = await payload.find({
    collection: 'landing-pages',
    where: {
      id: {
        equals: 1,
      },
    },
  });

I saw an error in a terminal like this

 ⚠ ./node_modules/payload/dist/config/load.js
require.extensions is not supported by webpack. Use a loader instead.

Import trace for requested module:
./node_modules/payload/dist/config/load.js
./node_modules/payload/dist/payload.js
./node_modules/payload/dist/index.js
./payload/get-payload.ts
./app/(marketing)/page.tsx

./node_modules/payload/node_modules/express/lib/view.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/payload/node_modules/express/lib/view.js
./node_modules/payload/node_modules/express/lib/application.js
./node_modules/payload/node_modules/express/lib/express.js
./node_modules/payload/node_modules/express/index.js
./node_modules/payload/dist/initHTTP.js
./node_modules/payload/dist/index.js
./payload/get-payload.ts
./app/(marketing)/page.tsx

Which I'm not really sure how it happens? and how do we have to fix this?

--

In case this can be help, this is my get-payload.ts (which basically is the same as in an example)

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

import { seed as seedData } from './seed';

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

let cached = (global as any).payload;

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

interface Args {
  initOptions?: Partial<InitOptions>;
  seed?: boolean;
}

export const getPayloadClient = async ({
  initOptions,
  seed,
}: Args = {}): Promise<Payload> => {
  if (!process.env.PAYLOAD_SECRET) {
    throw new Error('PAYLOAD_SECRET environment variable 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 {
    process.env.PAYLOAD_DROP_DATABASE = seed ? 'true' : 'false';
    cached.client = await cached.promise;

    if (seed) {
      await seedData(payload);
    }
  } catch (e: unknown) {
    cached.promise = null;
    throw e;
  }

  return cached.client;
};