Cannot render the "Rich Text" field from Contentful

Hello everyone,

Description

I have some issues rendering the rich text field from Contentful. I tried to use the gatsby plugin, but there are bugs for the rendering of assets and entries inside the rich text field (#9821 - #10592) So I installed the package from Contentful. But when I want to parse the JSON to HTML nothing renders.

Here is the code from my blog template

import React from "react"
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
import {DefaultLayout} from "../components/DefaultLayout"
import {
  BLOCKS,
  MARKS,
  INLINES
} from '@contentful/rich-text-types';
import { documentToHtmlString} from '@contentful/rich-text-html-renderer'
const document = {
  nodeType: 'document',
};

const options = {
  renderNode: {
      [INLINES.ASSET_HYPERLINK]: node => {
        return `<img class='custom-asset' src="${
                node.data.target.fields.file['fr-FR'].url
              }"/>`
      },
      [INLINES.EMBEDDED_ENTRY]: node => {
        return `<div class='custom-entry' />${
                node.data.target.fields.name['fr-FR']
              }</div>`
      },
    },
    renderMark: {
      [MARKS.BOLD]: text => `<custom-bold>${text}<custom-bold>`,
    },
  }


class BlogPostContentfulTemplate extends React.Component {
  render() {
    const post = this.props.data.contentfulPost
    const { previous, next } = this.props.pageContext
    return (
      <DefaultLayout location={this.props.location} siteDescription={post.metaDesc} siteTitle={post.metaTitle}>
        <h1>{post.postTitle}</h1>
        <ul>
          <li>Article par {post.author}</li>
        </ul>

        <Img fluid={post.postThumbnail.fluid} />
        <div className="article-content">{post.content.content}</div>
        {
          console.log("Result :" + documentToHtmlString(post.content.content, options))
          /// Console output
          // Result :
        }
        <ul>
          <li>
            {previous && (
              <Link to={`/blog/${previous.slug}`} rel="prev">← {previous.postTitle}</Link>
            )}
          </li>
          <li>
            {next && (
              <Link to={`/blog/${next.slug}/`} rel="next">{next.postTitle} →</Link>
            )}
          </li>
        </ul>
      </DefaultLayout>
    )
  }
}

export default BlogPostContentfulTemplate

export const pageQuery = graphql`
query ContentfulBlogPostBySlug($slug: String!) {
    contentfulPost( slug: { eq: $slug } ) {
        slug
        postTitle
        author
        metaTitle
        metaDesc
        content{
          nodeType
          content
        }
        postThumbnail {
            fluid{
              ...GatsbyContentfulFluid
            }
         }
      }
    }
`

Steps to reproduce

• Clone the dev branch from my repository

• Switch to the dev branch

• Do yarn develop

• Then go blog post used for the test and check the console. Nothing happens.

Expected result

The HTML rendered completely, with assets and entries.

Actual result

Nothing rendered

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

 gatsby info --clipboard
module.js:549
    throw err;
    ^

Error: Cannot find module 'regenerator-runtime/runtime'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\Maral Sabbagh\AppData\Roaming\npm\node_modules\gatsby-cli\lib\index.js:88:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

[Roshif]

you can try :

content { json }

[rmcsharry]

@Roshif Yes, using the json node works, thank you so much!