Misleading error in gatsby-node for `createPage` (`component` property)

[benjaminhoffman]

When using the boundActionCreators's createPage of the createPages API, I get the following error when I don't have a component property: TypeError: Path must be a string. Received undefined. This occurs even when I do have a path property! :)

This error makes it confusing to debug, esp for users new to gatsby-node.

Reproduce:

$ gatsby new gatsby-example-site

in gatsby-node.js, paste this:

 exports.createPages = ({boundActionCreators}) => {
  const { createPage } = boundActionCreators
  createPage({
    path: 'something'
  })
 }

You will get this error: Path must be a string. Received undefined

Then update the above code to:

...
  createPage({
    path: 'something',
    component: 'something-else',
  })
...

and you will get this error: This dependency was not found: * something-else in ./.cache/sync-requires.js

[KyleAMathews]

Hmm yeah, not very helpful errors. Lemme fix this real quick.

[lunelson]

I got this error today in gatsby-node, for spelling component as components; the error really should have told me I was missing the component key but instead it told me my component didn't exist which had me wondering for quite a while if and how there could be some error in requiring the file:

Your site's "gatsby-node.js" created a page with a component that doesn't exist. Missing component is undefined

{ path: '/gql-user/Sherwen-Karee/',
  components:
   '/Users/lunelson/Git/tests/gatsby-emotion-testing/src/templates/gql-user.js',
  context: { id: '3acc347a-6339-45fa-9e2b-cdc5ea6a5e97' } }

It would be cool if the errors could check supplied key names and suggest that you might have made a spelling error...

[djnorrisdev]

I got this error today in gatsby-node, for spelling component as components; the error really should have told me I was missing the component key but instead it told me my component didn't exist which had me wondering for quite a while if and how there could be some error in requiring the file:

Your site's "gatsby-node.js" created a page with a component that doesn't exist. Missing component is undefined

{ path: '/gql-user/Sherwen-Karee/',
  components:
   '/Users/lunelson/Git/tests/gatsby-emotion-testing/src/templates/gql-user.js',
  context: { id: '3acc347a-6339-45fa-9e2b-cdc5ea6a5e97' } }

It would be cool if the errors could check supplied key names and suggest that you might have made a spelling error...

I received this error by having the wrong file path to a component in my gatsby-node.js exports.createPages function. Just posting for additional items to look at if someone has this error.

[anmpog]

Commenting to say that I just had the same error message because I failed to pass a component to the createPage function.

[diogo-paixao-MM]

I got this error today in gatsby-node, for spelling component as components; the error really should have told me I was missing the component key but instead it told me my component didn't exist which had me wondering for quite a while if and how there could be some error in requiring the file:

Your site's "gatsby-node.js" created a page with a component that doesn't exist. Missing component is undefined

{ path: '/gql-user/Sherwen-Karee/',
  components:
   '/Users/lunelson/Git/tests/gatsby-emotion-testing/src/templates/gql-user.js',
  context: { id: '3acc347a-6339-45fa-9e2b-cdc5ea6a5e97' } }

It would be cool if the errors could check supplied key names and suggest that you might have made a spelling error...

I received this error by having the wrong file path to a component in my gatsby-node.js exports.createPages function. Just posting for additional items to look at if someone has this error.

Got this exact error as well.
Took me quite some time to figure out that my "template" folder was out of the "src" 😅. Thanks for the tip, it solved it!