Client file imports when not using payload.config.ts

[lenovouser]

I can't figure out how to use or emulate what was created in #5701 for a standalone instance where I pass the config directly. For example this here will fail:

import { mongooseAdapter } from "@payloadcms/db-mongodb";
import { lexicalEditor } from "@payloadcms/richtext-lexical";

import {
  BasePayload as Payload,
  buildConfig,
} from "payload";

const config = {
  secret: "testing",
  db: mongooseAdapter({
    url: "mongodb://localhost:27017/testing",
  }),
  editor: lexicalEditor(),
};

const payload = new Payload();

await payload.init({
  config: buildConfig(config),
});

Since importWithoutClientFiles takes a path it does not work for this, but it also seems to set no option that I could just set myself or anything? Only registering the loader, which does TS transpiration as far as I can see, or would somehow directly importing that loader also fix the issues I am getting with Payload trying to import CSS files?

node:internal/modules/esm/get_format:176
  throw new ERR_UNKNOWN_FILE_EXTENSION(ext, filepath);
        ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /Users/silas/Workspace/temporary/payload-test/node_modules/.pnpm/react-image-crop@10.1.8_react@19.0.0-rc-fb9a90fa48-20240614/node_modules/react-image-crop/dist/ReactCrop.css
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:176:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:219:36)
    at defaultLoad (node:internal/modules/esm/load:133:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:570:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:445:45) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Node.js v22.4.1

I am trying this with the Payload 3 Beta.

It seems like it also ignores the client files, which would fix my issue, now I only have to figure out how to apply that to the payload import itself I suppose? https://github.com/payloadcms/payload/blob/a7b0f8ba3636e5d16e27e35993066daf9d2429be/packages/payload/src/bin/loader/index.ts#L58

[jmikrut]

Hey @lenovouser — so the problem is actually the Lexical editor, which when imported, comes with CSS. At least right now. We have a monster PR that will make this significantly easier (https://github.com/payloadcms/payload/pull/7246). No loader should be necessary after this is done.

But, in the meantime, you could import the Lexical editor using import { importWithoutClientFiles } from 'payload/node'.

Will you give that a shot? Alternatively, you might consider importing your whole script with the importWithoutClientFiles function

[ainsleyclark]

Hey @jmikrut

It's strange that importWithoutClientFiles is still trying to import css files here when trying to create a headless editor.

const cfg = await sanitizeServerEditorConfig(defaultEditorConfig, config)

const editor = createHeadlessEditor({
    nodes: getEnabledNodes({
        editorConfig: cfg,
    }),
    nodes: [],
    onError: (error) => {
        console.error(error);
    },
});

node:internal/process/esm_loader:40
      internalBinding('errors').triggerUncaughtException(
                                ^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /Users/Ainsley/Desktop/ainsley.dev/WebKit/web-kit/node_modules/.pnpm/react-image-crop@10.1.8_react@18.3.1/node_modules/react-image-crop/dist/ReactCrop.css

[jmikrut]

Hey @ainsleyclark in your example it'd be because you are importing Lexical directly above the code that you provided. Lexical currently comes with CSS imports, but with an upcoming PR, it will not. It's related to this discussion:

https://github.com/payloadcms/payload/discussions/6938

I will close this issue because it's about to be fixed by the PR we are making in correspondence with #6938 - keep an eye out!

[ainsleyclark]

Hey @jmikrut thanks for the update. Is there a PR/Branch to track? Thank you.

[github-actions[bot]]

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