NextJS Error when using payload in same express server.

default discord avatar
10 months ago

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 {
    path: path.resolve(__dirname, "../.env"),

  if (!process.env.IS_DOCKER) {
      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();

    mongoURL: MONGO_URL,
    express: server,
  server.all("*", (req, res) => handle(req, res));

    .then(() => {
      server.listen(process.env.PORT, async () => {
        console.log(`Server listening on ${process.env.PORT}...`);
    .catch((error) => {
} catch (e) {
  • discord user avatar
    Payload Team
    10 months ago

    Is react-dnd ESM only? If so, that may be the issue.

  • default discord avatar
    9 months ago

    If I remember correctly, react-dnd is ESNext. Should that matter? I don't really understand why the application doesn't work when I run Payload in the same express server, but if I just run NextJs on this express server, it works. These applications should be able to run independently of each other (on the same express server), right?

  • discord user avatar
    Payload Team
    9 months ago

    Unfortunately with TypeScript and tsconfigs, this isn't as straight forward at times.

    If I were seeing that error, the first thing I'd look at is my tsconfig and also the react-dnd documentation about being ESM-only

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!


Connect with the Payload Community on Discord



Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.