Netlify-cms: media_folder not found with jekyll setup

[americool]

I'm trying to set up the cms for my site and I followed this repo's quick start documentation:

- Do you want to request a feature or report a bug?
Bug
- What is the current behavior?
After building the site in Netlify and going to /admin/#/ the page loads indefinitely. When I go to the console, I see the following error:

Uncaught (in promise) Error: Error in configuration file: A `media_folder` wasn't found. Check your config.yml file.

- If the current behavior is a bug, please provide the steps to reproduce.
My config looks like this:

backend:
  name: github
  repo: americool/americool.github.io # Path to your Github repository
  branch: master # Branch to update

  publish_mode: editorial_workflow
  media_folder: "img/uploads"

My repo can be found here: https://github.com/americool/americool.github.io/tree/master/admin

- What is the expected behavior?
Given that I've set up my media folder, I don't expect to see this error.

- Please mention your node.js, and operating system version.
Running OSX 10.11.6 and using node 6.9.2

[bdougie]

@cassiozen or @biilmann Abe is one of my boot camp students. We attempted to set this up on a basic jekyll setup and getting this error. We are going to attempt to debug this together.

[americool]

So I've found this issue so far:

If you look at the code in config.js inside of actions:

export function applyDefaults(config) {
  if (!("media_folder" in config)) {
    throw new Error("Error in configuration file: A `media_folder` wasn't found. Check your config.yml file.");
  }

  // Make sure there is a public folder
  set(defaults,
    "public_folder",
    config.media_folder.charAt(0) === "/" ? config.media_folder : `/${ config.media_folder }`);

You can see it's looking for the media_folder in config. However if you console.log out the config object you can see the media folder is actually nested inside of "backend." If we just add .backend in a few places this error goes away.

export function applyDefaults(config) {
  console.log(config);
  if (!("media_folder" in config.backend)) {
    throw new Error("Error in configuration file: A `media_folder` wasn't found. Check your config.yml file.");
  }

  // Make sure there is a public folder
  set(defaults,
    "public_folder",
    config.backend.media_folder.charAt(0) === "/" ? config.backend.media_folder : `/${ config.backend.media_folder }`);

  return defaultsDeep(config, defaults);
}

However I've now hit a new problem which seems to be in reducers/collections.js and I'm not quite sure how to proceed.

Uncaught (in promise) TypeError: (n || []).forEach is not a function

...which points to this code:

const configCollections = action.payload && action.payload.collections;
  switch (action.type) {
    case CONFIG_SUCCESS:
      return OrderedMap().withMutations((map) => {
        (configCollections || []).forEach((configCollection) => {

Any thoughts?

[biilmann]

Hi, the media folder setting needs to go in the root of the configuration, not inside the settings for the backend. So you'll want to change the config.yml to:

backend:
  name: github
  repo: americool/americool.github.io # Path to your Github repository
  branch: master # Branch to update

publish_mode: editorial_workflow
media_folder: "img/uploads"

[americool]

Thank you! Sorry I misunderstood the config.yml layout there. However I'm still hitting the same (second) error I mentioned (both running it locally or using netlify online.)

unpkg.com/[email protected]/dist/cms.js:13 Uncaught (in promise) TypeError: (n || []).forEach is not a function
    at unpkg.com/[email protected]/dist/cms.js:13
    at Qe.fe.withMutations (unpkg.com/[email protected]/dist/cms.js:2)
    at d (unpkg.com/[email protected]/dist/cms.js:13)
    at unpkg.com/[email protected]/dist/cms.js:86
    at f (unpkg.com/[email protected]/dist/cms.js:86)
    at unpkg.com/[email protected]/dist/cms.js:86
    at l (unpkg.com/[email protected]/dist/cms.js:41)
    at unpkg.com/[email protected]/dist/cms.js:43
    at unpkg.com/[email protected]/dist/cms.js:86
    at dispatch (unpkg.com/[email protected]/dist/cms.js:86)

Still looking into it.

[bdougie]

Turns out your YAML is not formatted correctly. There are a few errors preventing the CMS from parsing it correctly https://github.com/americool/americool.github.io/issues/6

You need to adjust your spacing from 4 spaces to 2. You also are missing a - before name.

collections:
  - name: "blog" # Used in routes, e.g. /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "_posts" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template i.e. YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Categories", name: "categories", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}

[americool]

This appears to have fixed the issue. Thanks!