my pipeline is breaking due to a Typescript error:...

Payload-Bot

last month

6

server/collections/Users.ts(80,21): error TS2322: Type '{ RowLabel: ({ data, index }: { data: any; index: any; }) => JSX.Element; }' is not assignable to type '{ Filter?: ComponentType<any> | undefined; Cell?: ComponentType<any> | undefined; Field?: ComponentType<any> | undefined; }'.
  Object literal may only specify known properties, and 'RowLabel' does not exist in type '{ Filter?: ComponentType<any> | undefined; Cell?: ComponentType<any> | undefined; Field?: ComponentType<any> | undefined; }'.

• 

  jarrod_not_jared

  Payload Team

  last month

  what version of payload are you on?

• 

  jamesryan

  last month

  "payload": "^1.11.4",
• 

  jarrod_not_jared

  Payload Team

  last month

  interesting, works for me

  
  

  
  

  want to share your users collection here again?

• 

  jamesryan

  last month

  import { CollectionConfig } from 'payload/types';
  
  
  
  const Users: CollectionConfig = {
      slug: 'users',
      admin: {
          useAsTitle: 'email',
          disableDuplicate: true,
      },
      fields: [
        
          {
              label: 'Password history',
              name: 'passwordHistory',
              type: 'array',
              admin: {
                  initCollapsed: true,
                  components: {
                      RowLabel: RowLabel,
                  },
                  condition: (_, siblingData) => {
                      return siblingData.passwordHistory && siblingData.passwordHistory.length > 0;
                  },
              },
              access: {
                  create: () => false,
                  update: () => false,
                  read: userHasUserManagerRole,
              },
  
              fields: [
                  {
                      name: 'password',
                      type: 'text',
                      label: 'Password',
                      hidden: true,
                  },
                  {
                      name: 'updatedAt',
                      type: 'text',
                      label: 'Updated at',
                      hidden: true,
                  },
                  {
                      name: 'updatedBy',
                      type: 'text',
                      label: 'Updated by',
                      hidden: true,
                  },
                  {
                      name: 'userSnapshot',
                      type: 'textarea',
                      label: 'User snapshot',
                      hidden: true,
                  },
              ],
          },
      ],
      hooks: {
          beforeOperation: [checkPasswordStrength],
          beforeValidate: [storePasswordHistory],
      },
  };
  
  export default Users;

  
  

  
  

  RowLabel:

  
  
  

  `
  const RowLabel: React.FC<{ data: any, index: number }> = ({ data, index }) => {
    const checkIsCompactView = width => (width <= 1572 && width >= 1024) || width <= 690;
      const [isCompactView, setIsCompactView] = useState(checkIsCompactView(window.innerWidth));
  
      useEffect(() => {
          const handleResize = () => {
              setIsCompactView(checkIsCompactView(window.innerWidth));
          };
  
          window.addEventListener('resize', handleResize);
          return () => {
              window.removeEventListener('resize', handleResize);
          };
      }, []);
  
      if (isCompactView) {
          return (
              <CompactRowLabelWrapper>
                  <EditLabel>Edited:</EditLabel>
                  <CompactP>
                      {data.updatedAt} by {data.updatedBy}
                  </CompactP>
              </CompactRowLabelWrapper>
          );
      } else {
          return (
              <RowLabelWrapper>
                  <Index>
                      <P>Index:</P>
                      <DataItem>{index}</DataItem>
                  </Index>
                  <UpdatedOn>
                      <P>Updated on:</P>
                      <DataItem>{data.updatedAt}</DataItem>
                  </UpdatedOn>
                  <UpdatedBy>
                      <P>Updated by:</P>
                      <DataItem>{data.updatedBy}</DataItem>
                  </UpdatedBy>
              </RowLabelWrapper>
          );
      }
  };

  
  

  
  

  Even using the supplied

  RowLabel

  example in the docs - the TS error would flag up as well so I don't think it's to do w/ my custom component

• 

  jarrod_not_jared

  Payload Team

  last month

  The one in the docs should show how to import

  RowLabelArgs

  but does not. Here is how you should type your custom component:

  
  
  

  import { RowLabelArgs } from 'payload/dist/admin/components/forms/RowLabel/types';
  import * as React from 'react';
  
  
  export const RowLabelComponent: React.FC<RowLabelArgs> = ({ data, index }) => (
    <div>custom row label</div>
  );

  
  
  

  We should make the import better for the row label args and update the docs.

  
  

  
  

  But I still was unable to repro the error message you are getting. Maybe try removing your yarn lock and node modules and re-run

  yarn
• 

  jamesryan

  last month

  Thanks @jarrod_not_jared - spinning a fresh deployment 🤞

  
  

  
  

  I'll action your recommendations as well re

  yarn.lock