`payload generate:importmap` Fails with Custom Lexical Editor Feature

[Tanish2002]

Describe the Bug

I've implemented a custom feature for the Lexical editor that allows marking text with colors(just add a tailwind class). This feature is heavily inspired by the LinkFeature code used by payload.

While the feature is nearly complete, I encounter an error when running the command payload generate:importmap. Below is the error output:

❯ pnpm payload generate:importmap                                                                                                                                                                            took 4m12s 

> [email protected] payload /home/weeb/code/javascript/custom-color-feature-repro
> cross-env NODE_OPTIONS=--no-deprecation payload "generate:importmap"


node:internal/process/promises:391
    triggerUncaughtException(err, true /* fromPromise */);
    ^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /home/weeb/code/javascript/custom-color-feature-repro/node_modules/.pnpm/[email protected][email protected]/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:143:22)
    at async nextLoad (node:internal/modules/esm/hooks:868:22)
    at async load (file:///home/weeb/code/javascript/custom-color-feature-repro/node_modules/.pnpm/[email protected]/node_modules/tsx/dist/esm/index.mjs?1734331094830:2:1762)
    at async nextLoad (node:internal/modules/esm/hooks:868:22)
    at async Hooks.load (node:internal/modules/esm/hooks:451:20)
    at async handleMessage (node:internal/modules/esm/worker:196:18) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Node.js v20.18.1
 ELIFECYCLE  Command failed with exit code 1.

My Own Observations

Through testing, I narrowed the issue to the createNode method in the server-side feature code. The problem arises specifically with the nodes array that includes the following two custom nodes:

• AutoColorTextNode
• ColorTextNode

If I remove the nodes array from the createServerFeature implementation, the payload generate:importmap command works correctly without any errors.

---

If I remove the nodes array, run payload generate:importmap then run the dev server pnpm run dev and then simply re-add the nodes array it somehow automatically works, while the payload generate:importmap still fails. Below is an image of it working in the admin panel:

Since it works using the above method, I can't figure out why this is happening,

Link to the code that reproduces this issue

https://github.com/Tanish2002/custom-color-feature-repro

Reproduction Steps

Error Scenario

1. Clone the reproduction repository:

git clone <repository-link>

2. Navigate to the cloned repository and download dependencies:

cd custom-color-feature-repro
pnpm install

3. Run the following command:

pnpm payload generate:importmap

4.Observe the error output, which matches the following:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" ...

Workaround

To bypass the issue and proceed with development:

1. Clone the reproduction repository and install dependencies (if not already done):

git clone https://github.com/Tanish2002/custom-color-feature-repro
cd custom-color-feature-repro
pnpm install

2. Open the file src/features/colorText/server/index.ts.
3. Locate the createServerFeature function and remove the nodes array from the returned object. For example, change:

return {
  ...
  nodes: [
    createNode({ ... }),
    createNode({ ... }),
  ],
  ...
}

To:

return {
  ...
  // nodes array removed
}

4. Run the following commands:

pnpm payload generate:importmap
pnpm run dev

5. After the app starts, re-add the nodes array in createServerFeature to restore its functionality.
6. Allow the application to hot-reload and verify the feature is working as expected in the admin panel.

If you re-run the pnpm payload generate:importmap command after re-adding the nodes array, the same error occurs.

Which area(s) are affected? (Select all that apply)

plugin: other, plugin: richtext-lexical

Environment Info

Binaries:
  Node: 20.18.1
  npm: 10.8.2
  Yarn: N/A
  pnpm: 9.15.0
Relevant Packages:
  payload: 3.7.0
  next: 15.1.0
  @payloadcms/email-nodemailer: 3.7.0
  @payloadcms/graphql: 3.7.0
  @payloadcms/next/utilities: 3.7.0
  @payloadcms/payload-cloud: 3.7.0
  @payloadcms/richtext-lexical: 3.7.0
  @payloadcms/translations: 3.7.0
  @payloadcms/ui/shared: 3.7.0
  react: 19.0.0
  react-dom: 19.0.0
Operating System:
  Platform: linux
  Arch: x64
  Version: #1-NixOS SMP PREEMPT_DYNAMIC Fri Nov 22 14:38:37 UTC 2024
  Available memory (MB): 15729
  Available CPU cores: 12