Closed lenovouser closed 1 month ago
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
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
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!
Hey @jmikrut thanks for the update. Is there a PR/Branch to track? Thank you.
This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.
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:
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?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