Contentful logo

Contentful Community

Using @contentful/field-editor-reference with @contentful/app-sdk

Hi!

I am working on creating an entry editor for some content model. I am using @contentful/app-sdk and @contentful/forma-36-react-components. I am able to have the UI the way I want with the forma-36 components but I also want to use @contentful/field-editor-reference to have access to the original functionality of the field.

The problem I am running into is when I pass sdk to the MultipleEntryReferenceEditor component from @contentful/field-editor-reference. I get the following error
`

Type ‘import("/node_modules/@contentful/app-sdk/dist/types").FieldExtensionSDK’ is not assignable to type ‘import("/node_modules/contentful-ui-extensions-sdk/dist/types").FieldExtensionSDK’.

`

I believe Contentful recommends using @contentful/app-sdk over contentful-ui-extensions-sdk but @contentful/field-editor-reference has a transient dependency on contentful-ui-extensions-sdk.

> const Linked = (props: MyReferenceEditorProps) => {
> 
>   return (
> 
>     // Pass the parameter into the original field editor component.
> 
>     <MultipleEntryReferenceEditor
> 
>       viewType="link"
> 
>       sdk={props.sdk}
> 
>       isInitiallyDisabled={true}
> 
>       hasCardEditActions={false}
> 
>       parameters={{
> 
>         instance: {
> 
>           showCreateEntityAction: true,
> 
>           showLinkEntityAction: true,
> 
>         },
> 
>       }}
> 
>       renderCustomCard={props =>
> 
>         props.entity.fields.exField ? (
> 
>           <Card testId="custom-card">
> 
>             <Typography style={{ marginBottom: '20px' }}>
> 
>               <Heading>{props.entity.fields.exField.en}</Heading>
> 
>               <Paragraph>{props.entity.fields.exDesc.en}</Paragraph>
> 
>             </Typography>
> 
>             <Button onClick={props.onEdit} style={{ marginRight: '10px' }}>
> 
>               Edit
> 
>             </Button>
> 
>             <Button onClick={props.onRemove}>Remove</Button>
> 
>           </Card>
> 
>         ) : (
> 
>           false
> 
>         )
> 
>       }
> 
>     />
> 
>   );
> 
> };