Custom Server ESM Integration

[cbratschi]

Link to reproduction

private repo

To Reproduce

See below.

Describe the Bug

We tried to integrate Payload as a custom server based on the example from https://github.com/payloadcms/payload/blob/master/examples/custom-server. Our project uses type module i.e. uses the ESM loader instead of CommonJS.

npm run dev fails with "Unknown file extension ".ts" for .../apps/gg-nextjs/src/payload/server.ts".

This workaround in nodemon.config gets the server to be started:

node --experimental-specifier-resolution=node --loader ts-node/esm src/payload/server.ts

Whereas this fails:

ts-node --project tsconfig.server.json src/payload/server.ts

The following payload.config.ts example uses ESM imports but in parallel __dirname:

https://github.com/payloadcms/payload/blob/master/examples/custom-server/src/payload.config.ts

__dirname should not be available in ESM modules. Probably Webpack allows this but a correctly implemented load won't accept it. We use import.meta.url which works fine for the server part but we have to load the payload.config.ts ourselves and pass it as a parameter to payload.init(). However, Payload still loads payload.config.ts again which leads to a Webpack issue because the url Node.js package cannot be found. Right now we avoid using the url package and __dirname. At least Payload is running in dev mode.

Payload should used the config in payload.init() as singleton and not load it again. This would allow us to load the ES module once and avoid conflicts between two repositories.

Payload Version

1.11.8

[cbratschi]

Update: the type had to be set to CommonJS in package.json. Could not get it to work with ES modules.

[sannajammeh]

I've had many problems with TS Node to the point where I abandoned it completely. I recommend trying out @swc-node/register/esm and see if that works.

[cbratschi]

@sannajammeh I am using ts-node with "swc: true". Internally it is using SWC.

[sannajammeh]

@sannajammeh I am using ts-node with "swc: true". Internally it is using SWC.

Yes but their resolution logic was the problem for me. Regardless of SWC being used it still goes through tsnode

[tyteen4a03]

I've had many problems with TS Node to the point where I abandoned it completely. I recommend trying out @swc-node/register/esm and see if that works.

Do you have an example setup?

[AlessioGr]

The following payload.config.ts example uses ESM imports but in parallel __dirname:

Typescript allows us to use ESM-style imports, but the whole of payload is still on 100% CJS, which is why you see stuff like __dirname and require being used.

We're looking to switch to ESM in 3.0 - until then, I recommend to just use CommonJS. Maybe Bun will be able to solve this in the meantime, as it can handle both ESM and CJS. I've converted it to a Discussion, as it's more of a feature request / improvement, rather than a bug.

[fpolli]

Please switch to ESM. It's important for playing well with the wider javascript ecosystem

[AlessioGr]

We did! 3.0 is now 100% ESM

[fpolli]

That's awesome. This is the problem of coming into a discussion late. :)

[carloslato]

I was trying to run Astro build with SSR mode on the same express server as Payload CMS to use the Local API. But nodeJS gives error when importing the 'entry.mjs' file from astro because Astro compiles for ES6. Any suggestions ?