Missing Custom Field Creation in PayloadCMS 3.0 Beta

[DaDoRiNZaNyA]

Link to reproduction

No response

Payload Version

3.0.0-beta.52

Node Version

v21.7.1.

Next.js Version

14.2.1

Describe the Bug

In PayloadCMS 3.0, the ability to create custom form fields is absent. In previous versions, components and hooks for creating custom components were available in the admin/components/form folder. However, after updating to the new version 3.0 beta.52, these features are no longer available.

Reproduction Steps

Try creating a custom field in PayloadCMS 3.0.

Adapters and Plugins

db-mongodb

[JarrodMFlesch]

@DaDoRiNZaNyA how are you importing things in your custom component? A code snippet will help.

[DaDoRiNZaNyA]

@JarrodMFlesch In the old version, I did it like in this examples, but in the new version, I can't find these hooks like useField. https://github.com/payloadcms/custom-field-guide/blob/master/src/color-picker/InputField.tsx https://payloadcms.com/blog/how-to-create-a-custom-select-field-in-payload-a-step-by-step-guide

[JarrodMFlesch]

You now need to import those from @payloadcms/ui

import { useField } from '@payloadcms/ui'

[DaDoRiNZaNyA]

[JarrodMFlesch]

Oh I did not realize what version you were on. Just update payload and all @payloadcms packages to the latest, 3.0.0-beta.53

[DaDoRiNZaNyA]

where can I find information about the latest version, here https://github.com/payloadcms/payload-3.0-demo the latest version is 52?

[JarrodMFlesch]

You can always find them in the releases tab. But you need to look for the pre-release tag, not the draft tag.

So the one you are looking for is here.

[DaDoRiNZaNyA]

Thanks a lot, i try this tomorrow

[DaDoRiNZaNyA]

import { useField } from "@payloadcms/ui";
import { Field } from "payload";
import * as React from "react";

const CustomSelectComponent: React.FC<{ path: string }> = ({ path }) => {
  const { value, setValue } = useField<string>({ path });

  return (
    <div>
      <label className="field-label">Custom Select - Countries</label>
    </div>
  );
};

export const CustomSelectField: Field = {
  name: "customSelectField",
  type: "text",
  admin: {
    components: {
      Field: CustomSelectComponent,
    },
  },
};

After the update, the useField hook appeared in @payloadcms/ui, but when I try to use it, an error occurs. I tried logging it to the console and received {} as a response.

[JarrodMFlesch]

@DaDoRiNZaNyA Id be happy to look at your repo if you can link it!

[DaDoRiNZaNyA]

@JarrodMFlesch I cannot make the repository public, but I can provide the necessary information

[JarrodMFlesch]

@DaDoRiNZaNyA you could create a public repository that only contains code to reproduce your error. That is what I would recommend.

[DaDoRiNZaNyA]

@JarrodMFlesch https://github.com/DaDoRiNZaNyA/payloadcms-test I downloaded this repository https://github.com/payloadcms/payload-3.0-demo with a Payload 3.0 example, updated it to version 53, added a custom component, and encountered the same error.

[ydemetriades]

same here

[paulpopus]

In order to use react hooks you need 'use client' at the very top of your file.

Your imports should also come from the UI package

import { TextInput } from '@payloadcms/ui'
import { useField, useFieldProps } from '@payloadcms/ui'

[DaDoRiNZaNyA]

@paulpopus If I use 'use client', I get a different error: 'Cannot access admin.components on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.'

'use client';
import { useField } from "@payloadcms/ui";
import { Field } from "payload";
import * as React from "react";

const CustomComponent: React.FC<{ path: string }> = ({ path }) => {
  const { value, setValue } = useField<string>({ path });

  return (
    <div>
      <label className="field-label">Custom Select - Countries</label>
    </div>
  );
};

export const CustomField: Field = {
  name: "customSelectField",
  type: "text",
  admin: {
    components: {
      Field: CustomComponent,
    },
  },
};

[DaDoRiNZaNyA]

Thank you everyone, I needed to move the field config to a separate server file, and then everything worked. Please update the documentation for these changes.

[JarrodMFlesch]

@DaDoRiNZaNyA yep we are working through the docs currently. Here is a starting point for migrations. Step 7 talks a bit about how this needs to be structured 👍

https://github.com/payloadcms/payload/blob/beta/docs/migration-guide/overview.mdx

[mewtwo0719]

First try to add in package.json

 "dependencies": {
    "@payloadcms/ui": "beta",
    }

Or any version you prefer

In my project i had similar issue. When I checked the node_modules/@payloadcms/ui the ui was missing. I was using turborepo in that project (and in root node modules, ui is present). My solution was to manually install ui lib: pnpm add @payloadcms/ui and then (even tho, autoimport is missing) I could add what I needed with import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo' It could take some time to find the exact location of what you need but the problem can be solved like this.

[github-actions[bot]]

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