ES Module issue in .tsx files when using modules that don't support common.js

[blobmold]

Link to reproduction

No response

Describe the Bug

I am trying to use d3js library to dynamically create svgs. Since d3js supports only ESM modules, I am encountering this error:

importing d3 as

import * as d3 from "d3";

error:

/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:701
            return old(m, filename);
                   ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/{user}/Sites/Work/{app}/node_modules/d3/src/index.js from /Users/{user}/Sites/Work/{app}/src/components/TablePickerField/index.tsx not supported.
Instead change the require of index.js in /Users/{user}/Sites/Work/{app}/src/components/TablePickerField/index.tsx to a dynamic import() which is available in all CommonJS modules.
    at require.extensions.<computed> [as .js] (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:701:20)
    at Object.<anonymous> (/Users/{user}/Sites/Work/{app}/src/components/TablePickerField/index.tsx:39:23)
    at m._compile (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:708:29)
    at require.extensions.<computed> [as .tsx] (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:710:16)
    at Object.<anonymous> (/Users/{user}/Sites/Work/{app}/src/fields/tablePickerField.ts:4:26)
    at m._compile (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:708:29)
    at require.extensions.<computed> [as .ts] (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:710:16)
    at Object.<anonymous> (/Users/{user}/Sites/Work/{app}/src/fields/venueSections.ts:4:26)
    at m._compile (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:708:29)
    at require.extensions.<computed> [as .ts] (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:710:16)
    at Object.<anonymous> (/Users/{user}/Sites/Work/{app}/src/collections/Venues/index.ts:43:23)
    at m._compile (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:708:29)
    at require.extensions.<computed> [as .ts] (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:710:16)
    at Object.<anonymous> (/Users/{user}/Sites/Work/{app}/src/collections/index.ts:10:16)
    at m._compile (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:708:29)
    at require.extensions.<computed> [as .ts] (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:710:16)
    at Object.<anonymous> (/Users/{user}/Sites/Work/{app}/src/payload.config.ts:33:32)
    at m._compile (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:708:29)
    at require.extensions.<computed> [as .ts] (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:710:16)
    at loadConfig (/Users/{user}/Sites/Work/{app}/node_modules/payload/dist/config/load.js:28:27)
    at BasePayload.init (/Users/{user}/Sites/Work/{app}/node_modules/payload/dist/payload.js:197:33)
    at getPayload (/Users/{user}/Sites/Work/{app}/node_modules/payload/dist/payload.js:256:44)
    at initHTTP (/Users/{user}/Sites/Work/{app}/node_modules/payload/dist/initHTTP.js:39:51)
    at Payload.init (/Users/{user}/Sites/Work/{app}/node_modules/payload/dist/index.js:27:54)
    at /Users/{user}/Sites/Work/{app}/src/server.ts:55:52
    at step (/Users/{user}/Sites/Work/{app}/src/server.ts:33:23)
    at Object.next (/Users/{user}/Sites/Work/{app}/src/server.ts:14:53)
    at /Users/{user}/Sites/Work/{app}/src/server.ts:8:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/{user}/Sites/Work/{app}/src/server.ts:4:12)
    at start (/Users/{user}/Sites/Work/{app}/src/server.ts:50:34)
    at Object.<anonymous> (/Users/{user}/Sites/Work/{app}/src/server.ts:74:1)
    at m._compile (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:708:29)
    at require.extensions.<computed> [as .ts] (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/index.js:710:16)
    at main (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/bin.js:154:20)
    at Object.<anonymous> (/Users/{user}/Sites/Work/{app}/node_modules/ts-node/dist/bin.js:238:5)

To Reproduce

Create a custom tsx field and import any ES module only library

import * as d3 from "d3";

Should generate the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module

Payload Version

2.1.1

Adapters and Plugins

bundler-webpack, db-mongodb, plugin-cloud-storage, richtext-slate, payload-swagger

[AlessioGr]

Hey @blobmold. Since payload is a CJS App, you cannot import ESM modules like that - this is intended, as that's the way CJS apps currently work. You do have these options right now:

• you can still import CJS using dynamic imports in your code like this: const djs = await import('djs')
• use an older version of the package which still supports CJS. Most packages have that available
• use Bun. I have not tried it, but it attempts to automatically support CJS / ESM, no matter in which environment you are

For payload there are two options:

• Dual-output CJS and ESM
• Switch to ESM

Both are feature requests rather than issues, so I'm converting this into a discussion. Dual outputting is beyond painful. So, for Payload 3.0, we are looking to switch to ESM!

[id3er0]

You do have these options right now

There is one more thing that I use — sucrase.

To run:

node -r sucrase/register src/server.ts

To build:

sucrase --out-dir ./dist --transforms typescript,imports ./src