Netlify-cms: Using CMS.registerPreviewTemplate('blog', BlogPostPreview) error: `Objects are not valid as a React child`

[jonathanphz]

Describe the bug
I'm attempting to build a Gatsby Netlify CMS using https://github.com/netlify-templates/gatsby-starter-netlify-cms/ as a guideline.

My project is very similar in most ways. When I attempt to add a preview pane using the following structure:

import CMS from 'netlify-cms'
import BlogPostPreview from './preview-templates/BlogPostPreview'

CMS.registerPreviewTemplate('blog', BlogPostPreview)

I get the following error: Objects are not valid as a React child

My BlogPostPreview looks like this:

import React from 'react'
import BlogPostTemplate from '../../components/BlogPostTemplate'

const BlogPostPreview = ({ entry, widgetFor }) => (
  <BlogPostTemplate
    date={entry.getIn(['data', 'date'])}
    title={entry.getIn(['data',  'title'])}
    html={widgetFor('body')}
  />
)
export default BlogPostPreview

To Reproduce
Steps to reproduce the behavior:

1. Register Preview Template in cms.js (CMS.registerPreviewTemplate('blog', BlogPostPreview)
2. run gatsby develop
3. Go to blog post edit page in CMS
4. See error Objects are not valid as a React child

Expected behavior
DIsplay a styled preview of the component

Applicable Versions:

• Netlify CMS version: [2.0.9]
• Git provider: [GitHub]
• OS: [OSX Sierra]
• "gatsby": "next",
• "gatsby-plugin-emotion": "^2.0.0-rc.0",
• "gatsby-plugin-netlify": "^2.0.0-rc.0",
  
  
  
  • "gatsby-plugin-netlify-cms": "^3.0.0-beta.0",
    
    
  
  

CMS configuration

backend:
  name: github
  repo: jonathanphz/gatsby-netlify-cms-exploration

media_folder: static/assets
public_folder: assets

collections:
  - name: blog
    label: Blog
    folder: blog
    create: true
    fields:
      - { label: Template Key, name: templateKey, widget: hidden, default: blog-post }
      - { name: path, label: Path }
      - { name: date, label: Date, widget: date }
      - { name: tumbnail, label: Featured Image, widget: image }
      - { name: title, label: Title }
      - { name: body, label: Body, widget: markdown }
  - name: pages
    label: Pages
    files: 
      - file: src/pages/home/index.md
        label: Home
        name: home
        fields: 
          - { name: path, label: Path }
          - { label: Template Key, name: templateKey, widget: hidden, default: home-page }
          - { label: Title, name: title, widget: string }
          - { label: Hero, name: hero, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}]}
          - { label: Image and Text Two Column, name: imageTextTwoColumn, widget: object, fields: 
            [ 
              {label: Reverse Layout, name: reverseLayout, widget: boolean, default: false }, 
              {label: Image, name: image, widget: object, fields: [{label: Image Upload, name: imagePath, widget: image}, {label: Image Alt Text, name: imageAlt, widget: string}]},
              {label: Text, name: text, widget: markdown }
            ]
          }
      - file: src/pages/about/index.md
        label: About
        name: about
        fields: 
          - { name: path, label: Path }
          - { label: Template Key, name: templateKey, widget: hidden, default: home-page }
          - { label: Title, name: title, widget: string }
          - { label: Hero, name: hero, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}]}
          - { label: Image and Text Two Column, name: imageTextTwoColumn, widget: object, fields: 
            [ 
              {label: Reverse Layout, name: reverseLayout, widget: boolean, default: false }, 
              {label: Image, name: image, widget: object, fields: [{label: Image Upload, name: imagePath, widget: image}, {label: Image Alt Text, name: imageAlt, widget: string}]},
              {label: Text, name: text, widget: markdown }
            ]
          }

Additional context
Add any other context about the problem here.

[erquhart]

That generally means something you're outputting in the component is an object. If your repo is public can you link it?

[jonathanphz]

Hi,

Yeah here it is: https://github.com/jonathanphz/gatsby-netlify-cms-exploration

[tech4him1]

@jonathanphz

When you call entry.getIn(['data', 'date']), it returns a JS date object. You can either call toString on it in your preview component, or you can set a format on the date field in your config.yml. If you set a format, the date will be saved as a string in the markdown, instead of a MD date.

[erquhart]

Closing this, but please reach out in our community chat if you need any further assistance.

[jonathanphz]

BTW - setting a format to date only works if you re-save the dates before applying this change.

Thanks @erquhart @tech4him1