NextJS Error when using payload in same express server.

Hi all! I use Payload in combination with NextJS. For that I made my own server.js that ensures that Next and Payload run on the same express server. However, I get the following error from NextJS.

error - Error [ERR_REQUIRE_ESM]: require() of ES Module /<PATH TO PROJECT>/src/node_modules/react-dnd/dist/index.js from /<PATH TO PROJECT>/src/.next/server/pages/ planning/[[...args]].js not supported.

Next tells me to replace the

statements, but since this is an external package (

) I can't just change it.

When I run the application without a payload (just remove the

), I don't get the error and the NextJS app runs great. My suspicion is that this is a webpack configuration of payload, but I'm not really sure how to solve it. Does anyone have an idea?

Here's the code of my server.js:

// server.js
const dotenv = require("dotenv");
const express = require("express");
const next = require("next");
const payload = require("payload");
const path = require("path");

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

  if (!process.env.IS_DOCKER) {
    dotenv.config({
      path: path.resolve(__dirname, `../.env.local`),
    });
  }

  const dev = process.env.NODE_ENV !== "production";
  const hostname = process.env.NEXT_PUBLIC_HOSTNAME || "localhost";
  const port = process.env.NEXT_PUBLIC_PORT || "3000";
  const { PAYLOAD_SECRET_KEY, MONGO_URL } = process.env;

  const app = next({ dev, hostname, port });
  const handle = app.getRequestHandler();

  const server = express();

  payload.init({
    secret: PAYLOAD_SECRET_KEY,
    mongoURL: MONGO_URL,
    express: server,
  });
  server.all("*", (req, res) => handle(req, res));

  app
    .prepare()
    .then(() => {
      server.listen(process.env.PORT, async () => {
        console.log(`Server listening on ${process.env.PORT}...`);
      });
    })
    .catch((error) => {
      console.log(error);
    });
} catch (e) {
  console.error(e);
}