contentful / rich-text

Libraries for handling and rendering Rich Text 📄
MIT License
548 stars 108 forks source link

<hr> tags not able to render #432

Open MoritzCooks opened 1 year ago

MoritzCooks commented 1 year ago

I just ran across a problem with <hr> tags. We have a contentful page that uses them and when I try to render the pages content with the documentToReactComponents from '@contentful/rich-text-react-renderer' I get this error:

error - TypeError: Cannot read properties of undefined (reading 'map')
    at nodeListToReactComponents (/.../node_modules/@contentful/rich-text-react-renderer/dist/rich-text-react-renderer.es5.js:414:18)
    at nodeToReactComponent (/.../node_modules/@contentful/rich-text-react-renderer/dist/rich-text-react-renderer.es5.js:429:24)
    at /.../node_modules/@contentful/rich-text-react-renderer/dist/rich-text-react-renderer.es5.js:415:40
    at Array.map (<anonymous>)
    at nodeListToReactComponents (/.../node_modules/@contentful/rich-text-react-renderer/dist/rich-text-react-renderer.es5.js:414:18)
    at nodeToReactComponent (/.../node_modules/@contentful/rich-text-react-renderer/dist/rich-text-react-renderer.es5.js:429:24)
    at documentToReactComponents (/.../node_modules/@contentful/rich-text-react-renderer/dist/rich-text-react-renderer.es5.js:486:12)
    at renderContentToReactComponent (webpack-internal:///./src/lib/richtextReactRenderer.tsx:115:107)
    at StaticPage (webpack-internal:///./src/components/StaticPage/StaticPage.tsx:112:115)
    at renderWithHooks (/.../node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16) {
  page: '/de/presse'
}

I investigated a bit further and noticed that the hr node looks like this: { "nodeType": "hr" } If I manually add a content key it works:

{
  "nodeType": "hr",
  "content": [],
}

Also the BLOCKS.HR element underlays the interface Block which by definition should have nodeType, data and content:

export interface Node {
    readonly nodeType: string;
    data: NodeData;
}
export interface Block extends Node {
    nodeType: BLOCKS;
    content: Array<Block | Inline | Text>;
}



ℹ️ I use the latest package version: "@contentful/rich-text-react-renderer": "^15.16.2",

Sam-Morgan-Tyghe commented 11 months ago

Im having the same issue

martinang2 commented 6 months ago

I'm also having the same issue. Good find!