[rich-text-react-renderer] Document type erroring
See original GitHub issueHi all,
Currently trying to implement a simple React component but having an issue with typing (new to typescript).
Component
import React, { FC } from 'react';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import { Document, Block } from '@contentful/rich-text-types';
interface RichTextRendererProps {
document: Document;
}
export const RichTextRenderer: FC<RichTextRendererProps> = ({
document,
}: RichTextRendererProps) => {
return <span>{documentToReactComponents(document)}</span>;
};
Usage
<RichTextRenderer document={mockDocument} />;
Error
Type '{ data: {}; content: { data: {}; content: { data: {}; marks: { type: string; }[]; value: string; nodeType: string; }[]; nodeType: string; }[]; nodeType: string; }' is not assignable to type 'Block'.
Types of property 'nodeType' are incompatible.
Type 'string' is not assignable to type 'BLOCKS'.
Document
{
data: {},
content: [
{
data: {},
content: [
{
data: {},
marks: [],
value: 'Lorem ipsum ',
nodeType: 'text',
},
{
data: {},
marks: [
{
type: 'bold',
},
],
value: 'dolor',
nodeType: 'text',
},
{
data: {},
marks: [],
value:
' sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea ',
nodeType: 'text',
},
{
data: {},
marks: [
{
type: 'italic',
},
],
value: 'commodo consequat. Duis aute ',
nodeType: 'text',
},
{
data: {},
marks: [],
value: 'irure dolor in reprehenderit in voluptate',
nodeType: 'text',
},
{
data: {},
marks: [
{
type: 'bold',
},
],
value: ' velit esse cillum',
nodeType: 'text',
},
{
data: {},
marks: [],
value:
' dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia',
nodeType: 'text',
},
{
data: {},
marks: [
{
type: 'underline',
},
],
value: ' deserunt mollit anim id est laborum',
nodeType: 'text',
},
{
data: {},
marks: [],
value: '.',
nodeType: 'text',
},
],
nodeType: 'paragraph',
},
],
nodeType: 'document',
}
Im sure its something simple but I really cant figure it out 😆
Thanks in advance
Issue Analytics
- State:
- Created 4 years ago
- Reactions:8
- Comments:5
Top Results From Across the Web
@contentful/rich-text-react-renderer - npm
React renderer for the Contentful rich text field type. Installation. Using npm: npm install @contentful/rich-text-react-renderer. Using yarn:.
Read more >Rich-Text-React-Renderer Does not Render h1 or Spaces ...
The answer is to add a style to THIS PARTICULAR DIV where the content from Contentful is rendered as opposed to the entire...
Read more >Handling common HTML and CSS problems - MDN Web Docs
Now you should be familiar with the main types of cross browser HTML ... you are using a DOCTYPE, and you are using...
Read more >Safari Technology Preview Release Notes - Apple Developer
Added the display of a thumbnail of selected file for <input type=file> on macOS ... set information when writing to the pasteboard when...
Read more >1. RTF Tutorial - RTF Pocket Guide [Book] - O'Reilly
RTF Tutorial This book is a convenient reference for Rich Text Format ... either turn hyphenation off for the whole document, or render...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I ran into this issue as well. Using the cf-content-types-generator community library to generate types for my space:
Results in:
documentToReactComponents(item.fields.content)
results in:documentToReactComponents
’s first argument maps to: node_modules/@contentful/rich-text-types/dist/types/types.d.tsinterface Document extends Node
cf-content-types-generator
output ofTypeNewsFields.content
maps to: node_modules/@contentful/rich-text-types/dist/types/types.d.tsinterface Block extends Node
orinterface Inline extends Node
It’s the same internal package for both, but the specificity is different. It would seem a more generic method like
nodeToReactComponents
might be appropriate to help my use case.If anyone comes here needing a quick solution, it’s dirt simple. Internally
Document
and the rest are all justNode
. Just cheat and useas
to self patch:This is most likely due to the
Node
having thenodeType
marked asreadonly
. You should be able to ensure the same characteristic on your objects by doing one of those: