Netlify-cms: Date widget w/ custome preview: Objects are not valid as a React child

[noelmace]

Describe the bug
When opening an existing page in admin, the corresponding custom preview component crash with the following error:

index.js:2177 Invariant Violation: Objects are not valid as a React child (found: Wed Jul 10 2019 10:04:46 GMT+0200 (Central European Summer Time)). If you meant to render a collection of children, use an array instead.

To Reproduce
(not sure this is the exact steps to reproduce)

1. create a collection with a field using the datetime widget
2. create a page in this collection
3. change datetime to date (in config and page)
4. try to edit the existing page

You can find my project for reproduction here: https://github.com/bonitasoft-labs/talks/tree/f5509f2f933ce6531204d7bc93d07ca9928be23b

Incriminated files:

• date field in config
• in the custom preview _remove this line and the error disappear_
• exact line in the template component render method - _remove this line and the error disappear_
• value in the markdown page

Expected behavior
Widget initial value should be consistent with the one in the markdown of a page.

Screenshots
Production build:

Unminified:

Applicable Versions:

• Netlify CMS version:
  
  
  
  • netlify-cms-app 2.9.5
  
  
  • netlify-cms-core 2.12.1
  
  
• Git provider: GitHub
• OS: Linux 5.1.16-arch1-1-ARCH
• Browser version: Google Chrome Version 77.0.3833.0 (Official Build) dev (64-bit)
  
• Node.JS version: v11.14.0

CMS configuration

https://github.com/bonitasoft-labs/talks/blob/f5509f2f933ce6531204d7bc93d07ca9928be23b/static/admin/config.yml

Additional context

After commenting the {date} rendering line, it makes the error disappear.

Using the React inspector, we can see that the date input value is a datetime:

but this is not the case when we create a new page

It looks like the previous value was kept somehow, but I can't find why and where. FYI, I already did a git reset --hard && git clean -dfx to be sure.

Following #1666, if I use entry.getIn(['data', 'date']).toString(), we can see that the initial data is indeed a datetime:

but if we edit this value, a real date is given

[noelmace]

Ok, I think I found the issue here.
I fixed it by:
a. deleting all branches which have been automatically generated by the CMS and then merged
b. edit the "date" format in markdown from "2019-07-10" to "Jul 10th 19" https://github.com/bonitasoft-labs/talks/pull/19/files

I had misunderstood the date format https://github.com/bonitasoft-labs/talks/blob/4fb8034938f4e222b0dcd768c0c2f2f684fd2aef/static/admin/config.yml#L19 here. My bad.

[noelmace]

So, in order to be clear and help anyone who would encounter the same issue, here are the gotcha:

1. Netlify CMS may use some code in the branches it previously created and merged. This could lead to some inconsistency when you try to edit an already published page if you edit the markdown directly, or the collection. You have too delete this branches after merging. Also, clear the cache if you use Netlify.
2. Date format is kind of weird. When you switch from the format you find in the doc (MMM, Do YY) to iso (YYYY-MM-DD), you have to add single quotes in your markdown (date: '2019-07-10').
3. If the date format in your page markdown isn't consistent with the one you defined in the collection config, the Date widget will output a datetime object instead of the expected date string!

None of this is really a bug :man_shrugging: Just keep an eye on what Netlify CMS generates and expect if you want to directly edit your markdowns.

[UtkarshKr007]

Thank you @noelmace. We had a similar problem where date picker's output was a date object rather a string, which produced React error#31. We finally solved it making sure the date attached to all posts had single quotes(ex: ''2020-05-23') and changing our config.yml so the line regarding date looked like
- { label: Date / Order, name: date, widget: date, format: 'YYYY-MM-DD' }