Import module error in payload.config.ts while starting Payload

[ckerimoglu]

I am trying to incorporate PayloadCMS into my existing Next 13 (app router) project. I have followed the documentation and installed Payload with npm install --save --legacy-peer-deps payload. The version that I have installed is, per package.json file the following: "payload": "^2.25.0".

I have also created server.ts and payload.config.ts files as described in documentation and put them into my root folder. However, when I try to start payload using node --loader ts-node/esm server.ts I get the error below.

/xxxx/xxxx/payload.config.ts:1
import { buildConfig } from "payload/config";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at loadConfig (/xxxx/xxxx/node_modules/payload/dist/config/load.js:28:27)
    at BasePayload.init (/xxxx/xxxx/node_modules/payload/dist/payload.js:204:33)
    at getPayload (/xxxx/xxxx/node_modules/payload/dist/payload.js:263:44)

To preempt some legitimate questions that may arise, the reason I didn’t use ts-node server.ts was because this command wasn’t recognizing .ts files and this turned out to be an issue of Node 20, which I am using (Node.js v20.16.0). But anyway, the command itself seems to execute normally and the payload.config.ts file is being recognized. But for some reason, I am getting this module error, although my package.json does have "type": "module", and I'm using import syntax everywhere else just fine. Here is the relevant part of my package.json file:

"private": true,
  "type": "module",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "payload:dev": "node --loader ts-node/esm server.ts"
  },

Just in case, here are also my server.ts and payload.config.ts files.

./server.ts

import express from "express";
import payload from "payload";
import * as dotenv from "dotenv";

dotenv.config();

const app = express();

const start = async () => {
  await payload.init({
    secret: process.env.PAYLOAD_SECRET || "default-secret",
    express: app,
    onInit: () => {
      payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
    },
  });

  app.listen(3000, () => {
    console.log(
      "Express is now listening for incoming connections on port 3000."
    );
  });
};

start();

./payload.config.ts

import { buildConfig } from "payload/config";
import { mongooseAdapter } from "@payloadcms/db-mongodb";
import path from "path";
import { slateEditor } from "@payloadcms/richtext-slate";
import dotenv from "dotenv";
import BlogPosts from "./cms/collections/BlogPosts";
import Employees from "./cms/collections/Employees";

dotenv.config();

export default buildConfig({
  serverURL: "http://localhost:3000",
  localization: {
    locales: ["en", "de"],
    defaultLocale: "en",
  },
  collections: [BlogPosts, Employees],
  editor: slateEditor({}),
  typescript: {
    outputFile: path.resolve(__dirname, "payload-types.ts"),
  },
  db: mongooseAdapter({
    url: process.env.MONGODB_URI || false,
  }),
});

Moreover, I notice that the error message tracks down to some files which are inside node_modules and were created there automatically after payload was installed. Here is the load.js file for example which is under /node_modules/payload/dist/config/

/* eslint-disable import/no-dynamic-require */ /* eslint-disable global-require */ "use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "default", {
    enumerable: true,
    get: function() {
        return _default;
    }
});
const _path = /*#__PURE__*/ _interop_require_default(require("path"));
const _logger = /*#__PURE__*/ _interop_require_default(require("../utilities/logger"));
const _clientFiles = require("./clientFiles");
const _find = /*#__PURE__*/ _interop_require_default(require("./find"));
const _validate = /*#__PURE__*/ _interop_require_default(require("./validate"));
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
const loadConfig = async (logger)=>{
    const localLogger = logger ?? (0, _logger.default)();
    const configPath = (0, _find.default)();
    _clientFiles.clientFiles.forEach((ext)=>{
        require.extensions[ext] = ()=>null;
    });
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    const configPromise = require(configPath);
    let config = await configPromise;
    if (config.default) config = await config.default;
    if (process.env.NODE_ENV !== 'production') {
        config = await (0, _validate.default)(config, localLogger);
    }
    return {
        ...config,
        paths: {
            config: configPath,
            configDir: _path.default.dirname(configPath),
            rawConfig: configPath
        }
    };
};
const _default = loadConfig;

I can see that it is using “require” syntax, instead of import. Should I even touch it and other files that appear in the error message? They also use "require" syntax. The alternative – i.e., removing “type”: “module” from package.json and trying to use “require” syntax everywhere made things even worse, giving rise to plenty other errors, since I have been using “import” syntax throughout my project. And anyway, in the example template repositories provided in Payload Github page all the files are using “import” syntax just as I am doing. Why am I getting this error? Can it be with the Payload version? Or something else? I would greatly appreciate your help, as this has been driving me crazy for several days now.