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; }'.
what version of payload are you on?
"payload": "^1.11.4",
interesting, works for me
want to share your users collection here again?
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
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
Thanks @jarrod_not_jared - spinning a fresh deployment 🤞
I'll action your recommendations as well re
yarn.lock
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.