[rich-text-react-renderer] Document type erroring

Hi 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

[lancegliser]

I ran into this issue as well. Using the cf-content-types-generator community library to generate types for my space:

cf-content-types-generator -o generated/contentful -s dtb5w0ega2aw -t CFPAT-****

Results in:

export interface TypeNewsFields {
    title: Contentful.EntryFields.Symbol;
    slug: Contentful.EntryFields.Symbol;
    content: CFRichTextTypes.Block | CFRichTextTypes.Inline;
    publishDate: Contentful.EntryFields.Date;
    Thumbnail: Contentful.Asset;
    fullSizeImage?: Contentful.Asset;
    summary: Contentful.EntryFields.Symbol;
    tags: Contentful.EntryFields.Symbol[];
}

export type TypeNews = Contentful.Entry<TypeNewsFields>;

documentToReactComponents(item.fields.content) results in:

TS2345: Argument of type 'Block | Inline' is not assignable to parameter of type 'Document'.
   Type 'Block' is not assignable to type 'Document'.
     Types of property 'nodeType' are incompatible.
       Type 'BLOCKS' is not assignable to type 'BLOCKS.DOCUMENT'.

documentToReactComponents’s first argument maps to: node_modules/@contentful/rich-text-types/dist/types/types.d.ts interface Document extends Node

cf-content-types-generator output of TypeNewsFields.content maps to: node_modules/@contentful/rich-text-types/dist/types/types.d.ts interface Block extends Node or interface 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 just Node. Just cheat and use as to self patch:

import { documentToReactComponents } from "@contentful/rich-text-react-renderer";
import { Document } from "@contentful/rich-text-types";

documentToReactComponents(content as Document)

[mateuszkocz]

This is most likely due to the Node having the nodeType marked as readonly. You should be able to ensure the same characteristic on your objects by doing one of those:

// 1. Marking your `nodeType` values `as const`.
const myObj = {
  json: {
    nodeType: BLOCK.DOCUMENT as const
  }
}

// 2. Typing the whole object.
const myObj: RichText = { ... }

// 3. Passing the object directly where you need it.
<RichTextRenderer document={{json: { nodeType: BLOCK.DOCUMENT }}} />;