payload icon indicating copy to clipboard operation
payload copied to clipboard

Imported fields not generating interfaces

Open Patrickroelofs opened this issue 1 year ago • 0 comments

Describe the Bug

The issue appears when you want to export a field into a seperate file, here for example I have exported my Icon field into a seperate file, importing it where needed. However, when running generate:types it does not generate the type for this field, although it should have by giving it the interfaceName.

import { deepMerge, type Field } from 'payload';
import { icons } from '@phosphor-icons/core';

type iconField = (overrides?: Partial<Field>) => Field;

export const iconField: iconField = (overrides = {}) =>
  deepMerge(
    {
      name: 'icon',
      label: 'Icon',
      type: 'select',
      interfaceName: 'Icons',
      options: icons.map((icon) => icon.pascal_name),
      required: true,
    },
    overrides,
  );

Here is an example of how the iconField is imported.

import { type GlobalConfig } from 'payload';
import { iconField } from '@/payload/fields/icons';

export const SiteSettings: GlobalConfig = {
  slug: 'site-settings',
  label: 'Site Settings',
  fields: [
    {
      name: 'socialMediaLinks',
      label: 'Social Media Links',
      type: 'array',
      fields: [
        iconField(),
        ...
      ],
    },
  ],
};

Here is a screenshot of the "socialMediaLinks" in the file payload-types.ts Image

Link to the code that reproduces this issue

https://github.com/Patrickroelofs/patrickroelofs.com/blob/main/src/payload/fields/icons.ts

Reproduction Steps

  • Export a Field into a seperate file, say an icon field
  • Give this field an interfaceName
  • Import it into your GlobalConfig/Block/Collection
  • Running generate:types will not create the type as defined by interfaceName

An exported field will not generate types:

import { deepMerge, type Field } from 'payload';
import { icons } from '@phosphor-icons/core';

type iconField = (overrides?: Partial<Field>) => Field;

export const iconField: iconField = (overrides = {}) =>
  deepMerge(
    {
      name: 'icon',
      label: 'Icon',
      type: 'select',
      interfaceName: 'Icons',
      options: icons.map((icon) => icon.pascal_name),
      required: true,
    },
    overrides,
  );

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

area: core

Environment Info

Binaries:
  Node: 23.1.0
  npm: N/A
  Yarn: N/A
  pnpm: 9.12.3
Relevant Packages:
  payload: 3.2.2
  next: 15.0.3
  @payloadcms/db-postgres: 3.2.2
  @payloadcms/graphql: 3.2.2
  @payloadcms/live-preview: 3.2.2
  @payloadcms/live-preview-react: 3.2.2
  @payloadcms/next/utilities: 3.2.2
  @payloadcms/plugin-cloud-storage: 3.2.2
  @payloadcms/richtext-lexical: 3.2.2
  @payloadcms/storage-vercel-blob: 3.2.2
  @payloadcms/translations: 3.2.2
  @payloadcms/ui/shared: 3.2.2
  react: 19.0.0-rc-fb9a90fa48-20240614
  react-dom: 19.0.0-rc-fb9a90fa48-20240614
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 31863
  Available CPU cores: 16

Patrickroelofs avatar Dec 02 '24 17:12 Patrickroelofs