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

Created on 30 Jan 2018  路  3Comments  路  Source: gatsbyjs/gatsby

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

Most helpful comment

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...

All 3 comments

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

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 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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rossPatton picture rossPatton  路  3Comments

timbrandin picture timbrandin  路  3Comments

totsteps picture totsteps  路  3Comments

brandonmp picture brandonmp  路  3Comments

3CordGuy picture 3CordGuy  路  3Comments