createClientFeature returns the wrong type, or createServerFeature needs the wrong type

[FreakeyPlays]

Link to reproduction

No response

Environment Info

Binaries:
  Node: 20.10.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  payload: 3.0.0-beta.98
  next: 15.0.0-canary.104
  @payloadcms/db-mongodb: 3.0.0-beta.98
  @payloadcms/email-nodemailer: 3.0.0-beta.98
  @payloadcms/graphql: 3.0.0-beta.98
  @payloadcms/live-preview: 3.0.0-beta.98
  @payloadcms/live-preview-react: 3.0.0-beta.98
  @payloadcms/next/utilities: 3.0.0-beta.98
  @payloadcms/plugin-cloud: 3.0.0-beta.98
  @payloadcms/plugin-form-builder: 3.0.0-beta.98
  @payloadcms/plugin-nested-docs: 3.0.0-beta.98
  @payloadcms/plugin-redirects: 3.0.0-beta.98
  @payloadcms/plugin-seo: 3.0.0-beta.98
  @payloadcms/richtext-lexical: 3.0.0-beta.98
  @payloadcms/translations: 3.0.0-beta.98
  @payloadcms/ui/shared: 3.0.0-beta.98
  react: 19.0.0-rc-06d0b89e-20240801
  react-dom: 19.0.0-rc-06d0b89e-20240801
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32507
  Available CPU cores: 8

Describe the Bug

I wanted to create a feature for the lexical editor. I followed the Docs and the offical video. My server feature complained about the wrong types.

The createServerFunction({}).feature.ClientFeature needs:
PayloadComponent<never, { featureKey: string; order: number; }> | undefined

The type createClientFeature returned:
FC<{featureKey: string, order: number}>

As I crawled through the compiled files at @payloadcms/richtext-lexical I found that the shipped features (Bold-, Italic Feature etc.) used the createClientFeature from the utilities folder. Since I can't import that function, I thought I would post this issue here because maby the wrong function got exported.

Reproduction Steps

Create a minimal custom Feature for the Lexical Editor.

myFeature/feature.client.ts

'use client'

import { createClientFeature } from '@payloadcms/richtext-lexical/client'

export const MyFeatureClient= createClientFeature({})

myFeature/feature.server.ts

import { createServerFeature } from '@payloadcms/richtext-lexical';
import { MyFeatureClient} from '@/myFeature/feature.client'

export const MyFeature= createServerFeature({
  key: "myFeature",
  feature: {
    ClientFeature: MyFeatureClient
  }
})

There is no need to import it anywhere, since the IDE should show the error that the type does not match.

Adapters and Plugins

No response

[GermanJablo]

Hi @FreakeyPlays.

Unfortunately, shortly after that video was uploaded, there was a change in the way things are imported.

Before you could directly import things from the client to the server. Now you need to import the path.

The PR where this happened is #7620

In particular, you might want to look at the documentation file which explains how to import correctly:

https://github.com/payloadcms/payload/blob/ba514ade3cda31cb62e9d0cf3d2971d474ccde0a/docs/admin/overview.mdx#defining-custom-components-in-the-payload-config

Or alternatively look at how the current features are made in the repository (inside the packages/richtext-lexical/features).

Sorry for the confusion! Hopefully this will be much clearer on the website in the upcoming release!

Please let me know if this answers your question or if there is anything else I can help you with.

[GermanJablo]

I'm closing this issue. If you're still having trouble with this, feel free to ask on Discord.

[github-actions]

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