Gatsby: TypeError: Cannot read property 'children' of undefined

Created on 17 Dec 2018 · 5Comments · Source: gatsbyjs/gatsby

Description

Hello. I have been creating plugin that will be fetching data from REST API and tries to build node tree for GraphQL.

Steps to reproduce

This is my simplified code that will try to build create nodes:

exports.sourceNodes = async (
  { actions, createNodeId, createContentDigest },
  configOptions,
) => {
  const { createNode } = actions

  console.log('Started Fetching...')

  // Gatsby adds a configOption that's not needed for this plugin, delete it
 delete configOptions.plugins

  const processEntity = (entity, parentId) => {
     const nodeId = createNodeId(`hcms-${entity.entity}-${entity.id}`)
     const nodeContent = JSON.stringify(entity)

        // This is array of Nodes that should be created
     let nodeArray = []

     const type = 'Hcms' +
     entity.entity.charAt(0).toUpperCase() +
     entity.entity.slice(1)

    let childIds = []

    const nodeData = Object.assign({}, entity, {
        id: nodeId,
        parent: parentId,
        children: childIds,
        internal: {
            type: type,
            content: nodeContent,
            contentDigest: createContentDigest(entity),
        },
   })

   nodeArray.push(nodeData)

   return nodeArray
 }

  // This is all nodes that will be created
  let nodesData = []

  const data = [
        {
          "id": 1,
          "title": "Title",
          "description": "Description",
          "slug": " slug"
        }
  ]

  for (let i= 0; ctIndex < data.length; i++) {
        let item = data[i]
        item.entity = item.slug
        nodesData = nodesData.concat(processEntity(item, null))
  }

  // Finally we are creating nodes
  for (let nodeIndex = 0; nodeIndex < nodesData.length; nodeIndex++) {
    createNode(nodesData[nodeIndex])
  }
  console.log('FINISHED')
}

I have removed interaction with API, that is why some lines of code looks strange.

Expected result

After running gatsby develop command, proper build of this project with GraphQL data

Actual result

It throws this crash error:

⠁ Started Fetching from HCMS
FINISHED
error Cannot read property 'children' of undefined


  TypeError: Cannot read property 'children' of undefined

  - actions.js:50 children.concat.children.map.child
    [gatsby-test2]/[gatsby]/dist/redux/actions.js:50:39

  - Array.map

  - actions.js:49 findChildrenRecursively
    [gatsby-test2]/[gatsby]/dist/redux/actions.js:49:42

  - actions.js:301 actions.deleteNode.args
    [gatsby-test2]/[gatsby]/dist/redux/actions.js:301:29

  - redux.js:468
    [gatsby-test2]/[redux]/lib/redux.js:468:35

  - source-nodes.js:77 staleNodes.forEach.node
    [gatsby-test2]/[gatsby]/dist/utils/source-nodes.js:77:34

  - Array.forEach

  - source-nodes.js:77
    [gatsby-test2]/[gatsby]/dist/utils/source-nodes.js:77:18

  - Generator.next

  - util.js:16 tryCatcher
    [gatsby-test2]/[bluebird]/js/release/util.js:16:23

 - promise.js:512 Promise._settlePromiseFromHandler
    [gatsby-test2]/[bluebird]/js/release/promise.js:512:31

 - promise.js:569 Promise._settlePromise
    [gatsby-test2]/[bluebird]/js/release/promise.js:569:18

 - promise.js:614 Promise._settlePromise0
    [gatsby-test2]/[bluebird]/js/release/promise.js:614:10

 - promise.js:694 Promise._settlePromises
    [gatsby-test2]/[bluebird]/js/release/promise.js:694:18


error UNHANDLED REJECTION


  TypeError: Cannot read property 'children' of undefined

  - actions.js:50 children.concat.children.map.child
    [gatsby-test2]/[gatsby]/dist/redux/actions.js:50:39

  - Array.map

  - actions.js:49 findChildrenRecursively
    [gatsby-test2]/[gatsby]/dist/redux/actions.js:49:42

  - actions.js:301 actions.deleteNode.args
    [gatsby-test2]/[gatsby]/dist/redux/actions.js:301:29

  - redux.js:468
    [gatsby-test2]/[redux]/lib/redux.js:468:35

  - source-nodes.js:77 staleNodes.forEach.node
    [gatsby-test2]/[gatsby]/dist/utils/source-nodes.js:77:34

  - Array.forEach

  - source-nodes.js:77
    [gatsby-test2]/[gatsby]/dist/utils/source-nodes.js:77:18

  - Generator.next

  - util.js:16 tryCatcher
    [gatsby-test2]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [gatsby-test2]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [gatsby-test2]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [gatsby-test2]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [gatsby-test2]/[bluebird]/js/release/promise.js:694:18

The main problem is that it actually finishes Node creation. Because I can see FINISHED log.

Environment

System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Binaries:
npm: 5.6.0 - D:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: ^2.0.53 => 2.0.53
gatsby-image: ^2.0.20 => 2.0.20
gatsby-plugin-manifest: ^2.0.9 => 2.0.9
gatsby-plugin-offline: ^2.0.16 => 2.0.16
gatsby-plugin-react-helmet: ^3.0.2 => 3.0.2
gatsby-plugin-sharp: ^2.0.14 => 2.0.14
gatsby-source-filesystem: ^2.0.8 => 2.0.8
my-source-of-plugin => 0.0.1
gatsby-transformer-sharp: ^2.1.8 => 2.1.8