Thursday, 1 June 2017

TypeError: Cannot read property 'markdownRemark' of undefined (React + Node)

I use Gatsby v1.0 to write my app. Fot now I have I error in my console:

enter image description here

First of all it is strange, because 'children' has its' PropTypes, you can see component below:

import React from "react"
import Link from "gatsby-link"
import { Container } from "react-responsive-grid"

import { rhythm, scale } from "../utils/typography"

class Template extends React.Component {
  render() {
    const { location, children } = this.props
    let header
    if (location.pathname === "/") {
      header = (
        <h1 >
          <Link to={"/"}>
            Gatsby Starter Blog
          </Link>
        </h1>
      )
    } else {
      header = (
        <h3>
          <Link to={"/"} >
            Gatsby Starter Blog
          </Link>
        </h3>
      )
    }
    return (
      <Container>
        {header}
        {children()}
      </Container>
    )
  }
}

Template.propTypes = {
  children: React.PropTypes.function,
  location: React.PropTypes.object,
  route: React.PropTypes.object,
}

export default Template

Also, my project is not launch, bacause localhost shows error: TypeError: Cannot read property 'markdownRemark' of undefined

I think something wrong in Node.js part, but all modules are installed and I am really sure in all connection with components, because it is starter kit and it is strange to see these mistakes here. Or maybe I should to fix previous component (they are in connect).

const _ = require("lodash")
const Promise = require("bluebird")
const path = require("path")
const select = require(`unist-util-select`)
const fs = require(`fs-extra`)

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { upsertPage } = boundActionCreators

  return new Promise((resolve, reject) => {
    const pages = []
    const blogPost = path.resolve("./src/templates/blog-post.js")
    resolve(
      graphql(
        `
      {
        allMarkdownRemark(limit: 1000) {
          edges {
            node {
              fields {
                slug
              }
            }
          }
        }
      }
    `
      ).then(result => {
        if (result.errors) {
          console.log(result.errors)
          reject(result.errors)
        }

        // Create blog posts pages.
        _.each(result.data.allMarkdownRemark.edges, edge => {
          upsertPage({
            path: edge.node.fields.slug, // required
            component: blogPost,
            context: {
              slug: edge.node.fields.slug,
            },
          })
        })
      })
    )
  })
}

// Add custom slug for blog posts to both File and MarkdownRemark nodes.
exports.onNodeCreate = ({ node, boundActionCreators, getNode }) => {
  const { addFieldToNode } = boundActionCreators
  if (node.internal.type === `File`) {
    const parsedFilePath = path.parse(node.relativePath)
    const slug = `/${parsedFilePath.dir}/`
    addFieldToNode({ node, fieldName: `slug`, fieldValue: slug })
  } else if (node.internal.type === `MarkdownRemark`) {
    const fileNode = getNode(node.parent)
    addFieldToNode({
      node,
      fieldName: `slug`,
      fieldValue: fileNode.fields.slug,
    })
  }
}



via Valeria Shpiner

No comments:

Post a Comment