YAMLException when defining an optional object with optional image fields

[MadsMadsDk]

- Do you want to request a feature or report a bug?
Bug

- What is the current behavior?
NetlifyCMS throws a YAMLException: "unacceptable kind of an object to dump [object Undefined]. I suspect it is caused by defining an object, that contains a bunch of optional images (a relevant usecase would be, like in this case, to implement a responsive image strategy), and not referencing any images as they are optional.

- If the current behavior is a bug, please provide the steps to reproduce.

1. Add this to the config.yml:

- name: "landing_page"
    label: "Landing page"
    folder: "_pages/landing-pages"
    sort: "date:desc"
    create: true
    fields: # The fields each document in this collection have
      - {label: "Layout", name: "layout", widget: "string", default: "landing-page"}
      - {label: "Page title", name: "title", widget: "string"}
      - label: "Hero"
        name: "hero"
        widget: "object"
        optional: true
        fields:
          - {label: "Headline", name: "headline", widget: "text", tagname: "h2", optional: true}
          - {label: "Short intro", name: "lead", widget: "text", optional: true}
          - {label: "Hero layout", name: "hero_layout", widget: "string", optional: true}
      - name: "sections"
        label: "sections"
        widget: list
        optional: true
        fields:
          - {label: "Section layout", name: "section_layout", widget: "string", default: "section"}
          - {label: "Section content", name: "section_content", widget: "markdown", optional: true}
          - {label: "Section content position", name: "section_content_position", widget: "string", optional: true}
          - {label: "Section content image", name: "section_content_image", widget: "image", optional: true}
          - name: "section_background_images"
            label: "Section background images"
            widget: "object"
            optional: true
            fields:
              - {label: "Mobile (600w)", name: "section_bg_600w", widget: "image", optional: true}
              - {label: "Tablet (1024w)", name: "section_bg_1024w", widget: "image", optional: true}
              - {label: "Desktop (1400w)", name: "section_bg_1400w", widget: "image", optional: true}
              - {label: "Full (1920w)", name: "section_bg_1920w", widget: "image", optional: true}
          - {label: "Image alt", name: "section_bg_alt", widget: "string", optional: true}
          - {label: "Show on mobile?", name: "section_bg_mobile_show", widget: "string", optional: true}
          - {label: "Background class", name: "section_bg_class", widget: "string", optional: true}
    meta: # Meta data fields. Just like fields, but without any preview element
      - {label: "Publish Date", name: "date", widget: "datetime", format: "YYYY-MM-DD hh:mm:ss"}
      - {label: "Permalink", name: "permalink", widget: "string"}
      - {label: "Language", name: "lang", widget: "string"}
      - {label: "Meta title", name: "meta_title", widget: "string"}
      - {label: "Meta description", name: "meta_description", widget: "text"}
      - name: sitemap
        label: "Sitemap settings"
        optional: true
        widget: object
        fields:
          - {label: "Exclude from sitemap?", name: "exclude", widget: "string", default: "no", optional: true}
          - {label: "Sitemap priority", name: "priority", widget: "string", default: "0.5", optional: true}

2. Attempt to create a new "Landing Page", but without filling in any of the optional fields (only "Section layout" is mandatory).
3. Try to save the document. It will result in an endless spinner, and said YAMLException.

- What is the expected behavior?
That NetlifyCMS produces a markdown file that looks like this:

---
layout: landing-page
title: Landing Page Title
hero:
  headline: ""
  lead: ""
  hero_layout: ""
sections:
  - section_layout: "-some-layout-string"
    section_content: ""
    section_content_position: ""
    section_content_image: null
    section_background_images:
      section_bg_600w: null
      section_bg_1024w: null
      section_bg_1400w: null
      section_bg_1920w: null
    section_bg_alt: ""
    section_bg_mobile_show: ""
    section_bg_class: ""
---

- Please mention your node.js, and operating system version.
Node v7.2.0
OS: macOS Sierra 10.12.3

Also using Netlify-git-api, and using the Netlify version shipped via CDN.

[erquhart]

@MadsMadsDk thanks for the detailed report!

[jaredwolff]

I'm also having the same issue. At first I thought it was some weird formatting issue with the image file I was using but I created a basic post only filling the fields that have the 'required' validation enabled.

- If the current behavior is a bug, please provide the steps to reproduce.

Same steps as above but with my particular setup.

1. Add this to the config.yml:

backend:
  name: github
  repo: <Repo location> # Path to your Github repository
  branch: master # Branch to update
  
media_folder: "/static/img"
public_folder: "/dist/img"

collections:
  - name: "blog" # Used in routes, e.g. /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "content/blog" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{slug}}" # Filename template i.e. YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Draft", name: "draft", widget: "string", default: "true"}
      - {label: "Type", name: "type", widget: "hidden", default: "blog"}
      - {label: "Author", name: "author", widget: "string", default: "Jared"}
      - {label: "Publish Date", name: "publishdate", widget: "datetime"}
      - {label: "Date", name: "date", widget: "datetime"}
      - {label: "Tags", name: "tags", widget: "list"}
      - {label: "Topics", name: "topics", widget: "list"}
      - {label: "Keywords", name: "keywords", widget: "list"}
      - {label: "Title", name: "title", widget: "string", pattern: [".{10,}", "Should have more than 30 characters and less than 160"]}
      - {label: "Description", name: "description", widget: "text", pattern: [".{30,160}", "Should have more than 30 characters and less than 160"]}
      - {label: "Featured Image", name: "image", widget: "image", required: false}
      - {label: "Image Alt", name: "image_alt", widget: "string", required: false}
      - {label: "Body", name: "body", widget: "markdown"}

1. Attempt to create a new "Blog", filling in all the required fields except for the image.
2. Try to save the document. It will result in an endless spinner, and said YAMLException.

- What is the expected behavior?

A markdown file should be generated that looks like so:

---
draft: 'true'
topics:
  - Test
image_alt: Test
keywords:
  - Test
author: Jared
date: 2017-04-12T14:16:16.388Z
title: This is a test
tags:
  - Test
type: blog
image: /dist/img/IMG_4004.JPG
description: This is a test of the system. So now I need to write more characters.
publishdate: 2017-04-12T14:16:16.385Z
---
Test

- Please mention your node.js, and operating system version.
Node v7.8.0
OS: macOS Sierra 10.11.6
Safari 10.1

[erquhart]

Looking into this now.

Here's a minimal reproduction case:

1. Add a date field to any collection in config.yml (under fields, not meta), eg.:

- {label: "Test Date", name: "date", widget: "datetime"}

2. Create a new entry using the collection type containing the date field.
3. When creating the new entry, change the value in the date field before saving.

Output:

YAMLException {
  name: "YAMLException",
  reason: "unacceptable kind of an object to dump [object Function]",
  mark: undefined,
  message: "unacceptable kind of an object to dump [object Function]",
  ...
}

Looks like we're passing the raw Moment object instead of a timestamp.

[erquhart]

@MadsMadsDk noticing that your case doesn't seem to use a date or datetime widget outside of meta - are you still experiencing this? Can you narrow down to a minimal repro case?

[erquhart]

@josephearl this is a regression from #348 - prior to that, we were using custom schemas, one of which handled parsing moment objects for date/datetime fields. It's not clear how to add custom parsers/schemas for stringifying. The schemas can be found here: https://github.com/netlify/netlify-cms/blob/b64dfab42e4da2bd1ea5255b6d22f4680b6a4e6c/src/formats/yaml.js.

Can you take a look?

[erquhart]

Turns out original issue probably is image related, as the error generated in all cases boils down to YAML parser schemas, and we have a custom schema for images in the file linked in my previous comment.

The issue that @jaredwolff mentioned is still a regression from #348.

[josephearl]

@erquhart yep will look into it

[erquhart]

@MadsMadsDk this should be resolved now, please re-open if not.