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

FreakeyPlays commented 2 months ago

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 createClientFeaturereturned:
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 utilitiesfolder. 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 commented 2 months ago

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 https://github.com/payloadcms/payload/pull/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 commented 2 months ago

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

github-actions[bot] commented 2 months ago

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

payloadcms / payload