withPayload.cjs does not exist, breaks cjs next.config.js

yayashn commented 3 weeks ago

Link to reproduction

No response

Environment Info

Binaries:
  Node: 20.12.1
  npm: 10.5.0
  Yarn: N/A
  pnpm: 8.14.2
Relevant Packages:
  payload: 3.0.0-beta.98
  next: 15.0.0-canary.140
  @payloadcms/db-postgres: 3.0.0-beta.98
  @payloadcms/email-nodemailer: 3.0.0-beta.98
  @payloadcms/graphql: 3.0.0-beta.98
  @payloadcms/next/utilities: 3.0.0-beta.98
  @payloadcms/plugin-cloud: 3.0.0-beta.98
  @payloadcms/richtext-lexical: 3.0.0-beta.98
  @payloadcms/translations: 3.0.0-beta.98
  @payloadcms/ui/shared: 3.0.0-beta.98
  react: 19.0.0-rc-d1afcb43-20240903
  react-dom: 19.0.0-rc-d1afcb43-20240903
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:32:11 PDT 2023; root:xnu-10002.41.9~7/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 12

Describe the Bug

Get this error upon installing payload on a project that does not use imports in next.config.js:

const { withPayload } = require("@payloadcms/next/withPayload");

node:internal/modules/cjs/loader:1180
  const err = new Error(`Cannot find module '${request}'`);
              ^

Error: Cannot find module '/Users/y/Desktop/payload-catalyst/node_modules/@payloadcms/next/dist/cjs/withPayload.cjs'
    at createEsmNotFoundErr (node:internal/modules/cjs/loader:1180:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:1168:15)
    at resolveExports (node:internal/modules/cjs/loader:590:14)
    at Module._findPath (node:internal/modules/cjs/loader:667:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1129:27)
    at /Users/y/Desktop/payload-catalyst/node_modules/.pnpm/next@15.0.0-rc.0_react-dom@19.0.0-rc-fb9a90fa48-20240614_react@19.0.0-rc-fb9a90fa48-20240614/node_modules/next/dist/server/require-hook.js:55:36
    at Module._load (node:internal/modules/cjs/loader:984:27)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at mod.require (/Users/y/Desktop/payload-catalyst/node_modules/.pnpm/next@15.0.0-rc.0_react-dom@19.0.0-rc-fb9a90fa48-20240614_react@19.0.0-rc-fb9a90fa48-20240614/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:179:18) {
  code: 'MODULE_NOT_FOUND',
  path: '/Users/y/Desktop/payload-catalyst/node_modules/@payloadcms/next/package.json'
}

Duplicating/renaming the file with the .cjs extension in node_modules manually fixes this /node_modules/@payloadcms/next/dist/cjs/withPayload.js->/node_modules/@payloadcms/next/dist/cjs/withPayload.cjs`.

Reproduction Steps

-> Use const { withPayload } = require("@payloadcms/next/withPayload"); in next.config.js. You can refer to this project: https://github.com/yayashn/payload-catalyst

Adapters and Plugins

No response

paulpopus commented 3 weeks ago

Payload is fully ESM only and thus we don't export or support CJS modules.

You should import withPayload like so

import { withPayload } from '@payloadcms/next/withPayload'

See this file from our 3.0 demo as a full example https://github.com/payloadcms/payload-3.0-demo/blob/main/next.config.mjs

Note that the next config is also .mjs

github-actions[bot] commented 3 weeks ago

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.

payloadcms / payload