After login: TypeError: Cannot convert undefined or null to object

[afisher88]

---

BUG REPORT INFORMATION

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

- What is the current behavior?
After logging in to Netlify CMS via the /admin/ page I get a console error of "TypeError: Cannot convert undefined or null to object"

The folder specified in my collection contains 2 markdown files and a javascript file which is a React component:

import React, { PureComponent } from 'react'

export default class PostPage extends PureComponent {
  render() {
    const { data } = this.props;
    return (
      <div>
        <span>{data.markdownRemark.frontmatter.date}</span>
        <h1>{data.markdownRemark.frontmatter.title}</h1>

        <p>{data.markdownRemark.frontmatter.title}</p>
        <div dangerouslySetInnerHTML={{
          __html: data.markdownRemark.html
        }} />
      </div>
    )
  }
}

export const query = graphql`
  query BlogPostQuery($slug: String!) {
    markdownRemark(fields: {
      slug:{
        eq: $slug
      }
    }) {
      excerpt
      frontmatter {
        title
        date(formatString: "DD MMMM YYYY")
      }
      html
    }
  }
`;

File structure:

I am using Gatsby as my static site generator.

Dependencies:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "gatsby": "^1.9.270",
    "gatsby-image": "^1.0.52",
    "gatsby-link": "^1.6.40",
    "gatsby-plugin-netlify-cms": "^2.0.1",
    "gatsby-plugin-react-helmet": "^2.0.10",
    "gatsby-plugin-sharp": "^1.6.47",
    "gatsby-plugin-styled-components": "^2.0.11",
    "gatsby-source-filesystem": "^1.5.38",
    "gatsby-transformer-remark": "^1.7.42",
    "gatsby-transformer-sharp": "^1.6.26",
    "netlify-cms": "^1.9.0",
    "react-helmet": "^5.2.0",
    "styled-components": "^3.3.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.12.0"
  }
}

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

1. Navigate to the /admin/ page
2. Login
3. Error occurs

- What is the expected behavior?
I should navigate to the backoffice area of Netlify CMS with no errors.

- Please mention your versions where applicable.

Netlify CMS version: 1.9.0
Browser version: Chrome 67.0.3396.87

Node.JS version: 5.6.0
Operating System: Windows 10 Pro 64Bit (10.0.17134 Build 17134)

- Please link or paste your config.yml below if applicable.

backend: 
  name: test-repo

media_folder: static/assets

collections:
  - name: post
    label: Posts
    folder: src/posts
    create: true
    fields:
      - { name: title, label: Title }
      - { name: date, label: Create At, widget: date }
      - { name: body, label: Post, widget: markdown }

I am following along with a tutorial and I can confirm the same file structure works with the following dependencies:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "gatsby": "^1.9.202",
    "gatsby-image": "^1.0.38",
    "gatsby-link": "^1.6.37",
    "gatsby-plugin-netlify-cms": "^1.0.8",
    "gatsby-plugin-react-helmet": "^2.0.5",
    "gatsby-plugin-sharp": "^1.6.47",
    "gatsby-plugin-styled-components": "^2.0.7",
    "gatsby-source-filesystem": "^1.5.21",
    "gatsby-transformer-remark": "^1.7.33",
    "gatsby-transformer-sharp": "^1.6.20",
    "react-helmet": "^5.2.0",
    "sharp": "^0.20.3",
    "styled-components": "^3.1.6"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1",
    "deploy": "gatsby build && gh-pages -d public -b master"
  },
  "devDependencies": {
    "gh-pages": "^1.1.0",
    "prettier": "^1.10.2"
  }
}

[robertkarlsson]

Three question questions:

1. What happens if you run the build command? (npm run build)
2. If you've made backend changes, have you pushed it to be deployed on netlify?
3. Do you have the corresponding data in your MD files that you are trying to query?

This sounds like an error caused by your code and not by the cms itself.

[afisher88]

Hi Robert, thanks for your response. In answer to your questions:

1. This is all run locally, I have tried running build but I'm having issues serving the public Gatsby folder locally in IIS as it 404s when pointed at the public directory for some reason and I'm not an IIS expert.

2. I don't have a Netlify account or a real repo set up, hence the "test-repo" in the config file. In the tutorial I'm following a dummy config is set up and navigating to the admin section still allows fields to be filled in, although the post can't be saved.

3. In the tutorial, these aren't tied up yet, but you can still enter data into the fields, although not save them. If I drop the body field off in the config then it does tie up with my markdown but I'm still getting the same error:

Config:

backend: 
  name: test-repo

media_folder: static/assets

collections:
  - name: post
    label: Posts
    folder: src/posts
    create: true
    fields:
      - { name: title, label: Title }
      - { name: date, label: Create At, widget: date }

Markdown:

---
title: 'Welcome to the new blog'
date: '2018-04-27'
---

Laboris reprehenderit esse enim culpa elit laboris sit incididunt elit voluptate. Cupidatat adipisicing tempor adipisicing nulla laboris. Nisi irure sint minim voluptate est elit reprehenderit id velit. Aliqua ad eu sit consectetur reprehenderit esse laboris est consequat. Laborum sint fugiat adipisicing proident laborum id consectetur minim consectetur esse sunt ut.

Lorem veniam duis officia do consequat elit. Consequat occaecat quis nostrud tempor sit nulla laborum veniam. Ullamco mollit incididunt enim adipisicing veniam deserunt aute.

<!-- END -->

Incididunt cillum in incididunt eu Lorem mollit nostrud occaecat aliquip adipisicing nulla. Magna sunt nisi Lorem enim eiusmod labore amet quis deserunt sint aute proident enim amet. Nostrud anim qui exercitation commodo nostrud adipisicing deserunt ea consequat eiusmod.

Proident consectetur elit do ipsum dolor ex fugiat pariatur reprehenderit. Adipisicing exercitation labore enim mollit et. Deserunt nulla sint consequat eiusmod. Sunt laborum culpa fugiat minim nostrud. Minim officia cillum sit exercitation irure est aliqua. Tempor non minim fugiat eiusmod et enim aliquip.

Eiusmod proident aliquip qui veniam nisi duis aliquip mollit anim ipsum amet ad culpa. Officia velit exercitation irure in commodo eu minim proident adipisicing et nulla voluptate ad. Occaecat anim dolore et dolor laborum excepteur in mollit consequat incididunt. Dolor enim reprehenderit esse sunt nostrud non in.

It could be my code causing the problem, but its not easy to debug when the error message is vague and the call stack obfuscated, even in development mode.

I also have the following warning in my console, though I am not sure if it is related or not:

[robertkarlsson]

Thanks for further explaining your problem. Just to confirm, the “npm run build” command passes without errors? My experience with this setup is that the error messages are more clear when the build fails.

Otherwise if you could upload your repo to github I could take a look and see if I can provide further help. Can you maybe also link the tutoria you are following?

[tech4him1]

@afisher88 What is the stack-trace of the original console error? test-repo mode is in-memory only and shouldn't access the other files on your site, so unless the build is broken like @robertkarlsson suggested, it may be in the CMS.

[afisher88]

Sorry for the delayed reply.

@robertkarlsson I can confirm that the "npm run build" builds with no errors.

There is 1 warning:

warning There are conflicting field types in your data. GraphQL schema will omit those fields.
SitePluginConnection.packageJson.author:

but I don't believe this is relevant as it occured before installing Netlify CMS

@tech4him1
Please see stacktrace below:

[tech4him1]

@afisher88 Great, the fix was merged in #1438, and it should be in the next release.

If you need a temporary fix for now, you should be able to add the following your CMS admin HTML. You'll be able to remove it once you switch to a "real" backend.

<script>
// For each folder in your config.
window.repoFiles['src/posts'] = {};
</script>

Thanks for your help as well @robertkarlsson!