Netlify-cms: TypeError: r.toJS is not a function

[equivalentideas]

Describe the bug

When loading up the view to create or edit an item from any collection, if the edit form contains the relational widget, after a few seconds then complete pages goes to the error screen.

If I remove the relation widget from the view in my config file, and then reload, the error does not happen.

To Reproduce

Haven't tested this with a clean template build.

Expected behavior

The page not to break.

Screenshots

Applicable Versions:

• Netlify CMS version: [email protected]
• Git provider: proxy
• Browser version: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0

CMS configuration /admin/config.yml

backend:
  name: git-gateway
  branch: master
site_url: "https://www.foobar.org.au"
media_folder: "src/downloads"
public_folder: "/downloads"
local_backend: true
collections:
  - name: "generic_pages"
    label: "Generic Pages"
    folder: "src/pages"
    slug: "{{slug}}"
    preview_path: "pages/{{slug}}"
    create: true
    fields:
      - {label: "Layout", name: "layout", widget: "hidden", default: "layouts/page.njk"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Permalink Override (Pattern: '/your-slug/index.html')", name: "permalink", widget: "string", required: false}
      - label: "Work stream"
        name: "work_streams"
        widget: "relation"
        collection: "work_streams"
        searchFields: ["title"]
        displayFields: "title"
        valueField: "slug"
        multiple: true
        required: false
      - {label: "Social Image", name: "socialImage", widget: "image", required: false}
      - {label: "Summary", name: "summary", widget: "text", required: false}
      - {label: "Body", name: "body", widget: "markdown"}
  - name: "research"
    label: "Research Publications"
    folder: "src/research"
    slug: "{{slug}}"
    preview_path: "research/{{slug}}"
    create: true
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime", timeFormat: false, dateFormat: "YYYY-MM-DD", format: "YYYY-MM-DD" }
      - {label: "Author", name: "author", widget: "string", required: false, hint: "Text or markdown."}
      - {label: "Media release URL", name: "media_release_url", widget: "string", required: false, hint: "The full URL for the media release for this report."}
      - label: "Published"
        name: "published"
        widget: "boolean"
        required: true
        default: false
        hint: 'If false, the publication will not appear in research lists.'
      - label: "Link Only"
        name: "link_only"
        widget: "boolean"
        required: true
        default: false
        hint: 'Turning this on makes links to this resource link directly to the file.'
      - label: "Work stream"
        name: "work_streams"
        widget: "relation"
        collection: "work_streams"
        searchFields: ["title"]
        displayFields: "title"
        valueField: "slug"
        multiple: true
        required: false
      - label: "File"
        name: "file"
        widget: "file"
        required: false
      - {label: "Publication Cover Image", name: "cover_image", widget: "image", required: false}
      - {label: "Social Media Image", name: "socialImage", widget: "image", required: false, hint: "This appears with the link when people share the page on Twitter or Facebook."}
      - {label: "Summary", name: "summary", widget: "string", required: false}
      - {label: "Body", name: "body", widget: "markdown", required: false}
  - name: "people"
    label: "People"
    folder: "src/people"
    slug: "{{slug}}"
    preview_path: "people/{{slug}}"
    create: true
    sortableFields: ["Name"]
    fields:
      - {label: "Layout", name: "layout", widget: "hidden", default: "layouts/person.njk"}
      - {label: "Name", name: "name", widget: "string"}
      - {label: "Slug", name: "slug", widget: "string", hint: "Version of the name for URLs, e.g. foo-bar", required: true}
      - {label: "Role", name: "role", widget: "string", required: false}
      - label: "Work stream"
        name: "work_streams"
        widget: "relation"
        collection: "work_streams"
        searchFields: ["title"]
        displayFields: "title"
        valueField: "slug"
        multiple: true
        required: false
      - {label: "Tags", name: "tags", widget: "list", allow_add: true, required: false}
      - {label: "Biography body", name: "body", widget: "markdown", required: false}
  - name: "posts"
    label: "Posts"
    folder: "src/posts"
    slug: "{{slug}}"
    preview_path: "news/{{slug}}"
    create: true
    sortableFields: ["title", "date", "Update On"]
    fields:
      - {label: "Layout", name: "layout", widget: "hidden", default: "layouts/post.njk"}
      - {label: "Title", name: "title", widget: "string"}
      - lable: "Type"
        name: "type"
        widget: "select"
        options: ["Media release", "Briefing note", "Update", "Event"]
        required: true
      - label: "Work stream"
        name: "work_streams"
        widget: "relation"
        collection: "work_streams"
        searchFields: ["title"]
        displayFields: "title"
        valueField: "slug"
        multiple: true
        required: false
      # - {label: "SEO Meta Title", name: "metaTitle", widget: "string", required: false}
      # - {label: "SEO Meta Description", name: "metaDesc", widget: "string", required: false}
      # - {label: "Social Image", name: "socialImage", widget: "image", required: false}
      - {label: "Publish Date", name: "date", widget: "datetime", timeFormat: false, dateFormat: "YYYY-MM-DD", format: "YYYY-MM-DD" }
      # - {label: "Tags", name: "tags", widget: "list", allow_add: true}
      - {label: "Body", name: "body", widget: "markdown"}
  - name: "work_streams"
    label: "Work Streams"
    folder: "src/work_streams"
    slug: "{{slug}}"
    preview_path: "{{slug}}"
    create: false
    fields:
      - {label: "Permalink", name: "permalink", widget: "hidden", required: false}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Short summary", name: "shortSummary", widget: "text", required: false, hint: "This will appear where work streams are listed throughout the site."}
      - {label: "Page Introduction", name: "summary", widget: "text", required: false}
      - {label: "Body", name: "body", widget: "markdown"}

[erezrokah]

Hi @equivalentideas, thanks for reporting. Per the docs https://www.netlifycms.org/docs/widgets/#relation, displayFields should be an array, e.g. displayFields: ["title"].
Previous versions of the CMS handled it due to a bug.
Regardless we should probably verify it when loading the configuration and print a relevant error message.

[erezrokah]

Closing per lack of response