Gatsby react component - Minified React error #31 in preview

I have a site I am working on to learn React in combination with Gatsby and Netlify CMS. When I now want to use the preview for a page in Netlify CMS, I get a Minified React error #31 (React Error Decoder). The page rendering with Gatsby works as expected.

The react component looks like this:

import React from 'react'
import PropTypes from 'prop-types'
import Content from '../components/Content'

export const HTMLPageTemplate = ({ title, content, contentComponent }) => {
  const PageContent = contentComponent || Content

  return (
    <div className="container content-container">
      <h2>{title}</h2>
      <PageContent className="content" content={content} />
    </div>
  )
}

HTMLPageTemplate.propTypes = {
  title: PropTypes.string.isRequired,
  content: PropTypes.string,
  contentComponent: PropTypes.func,
}

The Content component looks like this:

import * as React from 'react'
import PropTypes from 'prop-types'

export const HTMLContent = ({ content, className }) => (
  <div className={className} dangerouslySetInnerHTML={{ __html: content }} />
)

const Content = ({ content, className }) => ({ content })

Content.propTypes = {
  content: PropTypes.node,
  className: PropTypes.string,
}

HTMLContent.propTypes = Content.propTypes

export default Content

The react preview template for Netlify CMS looks like this:

import React from 'react'
import PropTypes from 'prop-types'
import { HTMLPageTemplate } from '../../templates/html-page'

const HTMLPagePreview = ({ entry, widgetFor }) => {
  console.log(widgetFor('body'))
  return (
    <HTMLPageTemplate
      title={entry.getIn(['data', 'title'])}
      content={widgetFor('body')}
    />
  )
}

HTMLPagePreview.propTypes = {
  entry: PropTypes.shape({
    getIn: PropTypes.func,
  }),
  widgetFor: PropTypes.func,
}

export default HTMLPagePreview

and is registered in the cms.js with CMS.registerPreviewTemplate('html', HTMLPagePreview).

This is a screenshot of Netlify CMS with the logged object in the console.
local dev server

The printed object for content is as followed:

{
    "key": "body",
    "ref": null,
    "props": {
        "field": {
            "label": "Body",
            "name": "body",
            "widget": "markdown"
        },
        "value": "\nDies ist ein Testbeitrag\n",
        "entry": {
            "partial": false,
            "path": "src/pages/html/dies-ist-ein-test.md",
            "meta": {
                "path": "src/pages/html/dies-ist-ein-test.md"
            },
            "isModification": null,
            "raw": "---\ntemplateKey: html-page\nlayout: html\ntitle: Dies ist ein Test\npath: /test/\n---\n\nDies ist ein Testbeitrag\n",
            "data": {
                "templateKey": "html-page",
                "layout": "html",
                "title": "Dies ist ein Test",
                "path": "/test/",
                "body": "\nDies ist ein Testbeitrag\n"
            },
            "author": "",
            "slug": "dies-ist-ein-test",
            "newRecord": false,
            "status": "",
            "mediaFiles": [
                {
                    "id": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
                    "name": ".gitkeep",
                    "path": "static/images/.gitkeep",
                    "file": {},
                    "size": 0,
                    "url": "blob:http://localhost:8000/d320cb6d-0766-4dc1-95bb-dc6bf5a63cf9",
                    "displayURL": "blob:http://localhost:8000/d320cb6d-0766-4dc1-95bb-dc6bf5a63cf9",
                    "key": "3416f431-310a-4f99-a236-214272483261"
                }
            ],
            "label": null,
            "updatedOn": "",
            "i18n": {},
            "collection": "html"
        },
        "fieldsMetaData": {}
    },
    "_owner": null
}

The code is mostly the same as for the blog page in netlify-templates/gatsby-starter-netlify-cms, where it works without any error (and the logged object is equal to the one in my project). What am I doing wrong?

Hi there! Thanks for your interest in Netlify CMS. Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution!