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.
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?