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

default discord avatar
Payload-Bot
last month
6

my pipeline is breaking due to a Typescript error:



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; }'.


Original message from @jamesryan - Moved from https://discord.com/channels/967097582721572934/967097582721572937/1139236080034521230 (in #general)
  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    what version of payload are you on?

  • default discord avatar
    jamesryan
    last month
    "payload": "^1.11.4",
  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    interesting, works for me



    want to share your users collection here again?

  • default discord avatar
    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

  • discord user avatar
    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
  • default discord avatar
    jamesryan
    last month

    Thanks @jarrod_not_jared - spinning a fresh deployment 🤞



    I'll action your recommendations as well re

    yarn.lock
Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.