Tutorial part 4 - cannot read site of undefined

[barnu5]

After following steps from "Now let’s start querying" to "It worked!!" - it didn't work :/

https://imgur.com/a/B1Lqw

I get the fail and die error with a red bg as pasted below:

TypeError: Cannot read property 'site' of undefined
new
webpack:///src/layouts/index.js:19
http://localhost:8000/commons.js:39277:25
instantiate
webpack:////react-proxy/modules/createClassProxy.js:103
_default (http://localhost:8000/commons.js:39292:23),
http://localhost:8000/commons.js:27122:17
measureLifeCyclePerf
webpack:////react-dom/lib/ReactCompositeComponent.js:73
ReactCompositeComponentWrapper._constructComponentWithoutOwner
webpack:////react-dom/lib/ReactCompositeComponent.js:302
ReactCompositeComponentWrapper._constructComponent
webpack:////react-dom/lib/ReactCompositeComponent.js:277
ReactCompositeComponentWrapper.mountComponent
webpack:////react-dom/lib/ReactCompositeComponent.js:185
Object.mountComponent
webpack:////react-dom/lib/ReactReconciler.js:43

[KyleAMathews]

Hey! Thanks for reporting this issue! Sorry you ran into trouble with the tutorial.

Could you try modifying your render function in the layout component to look like:

export default ({ children, data }) => {
  console.log(data)
  return (
  <g.Div
    margin={`0 auto`}
    maxWidth={700}
    padding={rhythm(2)}
    paddingTop={rhythm(1.5)}
  >
    <Link to={`/`}>
      <g.H3 marginBottom={rhythm(2)} display={`inline-block`}>
        {data.site.siteMetadata.title}
      </g.H3>
    </Link>
    <Link className={linkStyle} to={`/about/`}>
      About
    </Link>
    {children()}
  </g.Div>
)

[KyleAMathews]

Then look in your console to see what's logged out.

If that doesn't work, try restarting your development server.

[KyleAMathews]

Looks like there's a JS error now in your component.

Would you mind just starting over? It does look like something went wrong while you were copying files over. If the same error happens again, I'll check it out later to see if a bug has popped up in Gatsby recently.

[oreny1]

I have the similar problem as well.

GraphQL Error Unknown field siteMetadata on type Site

Looks like the schema is not updated (grphiql don't show the new data after restart)

Any suggestions how get around it?

Thanks

[SilasOtoko]

Same problem here, even after copying and pasting the code straight from the tutorial and restarting the server.

[SilasOtoko]

I've figured it out! Well, for myself at least. The tutorials don't always specify where a gatsby-config.js should go. In tutorial 3, I had the config file in my 'src' file without issues, but after talking with KyleAMatthews I realized that it should actually be created in the root folder, not in src. After moving it to the root directory the error went away! So for Tutorial 4, gatsby-config.js must be in the root directory.

Hope this helps someone else!

[barnu5]

Confirmed resolved!

[kildareflare]

I've come across a related problem, opened new issue here: #2674

[theroncross]

Having the same issue - data is undefined (verified by logging as above).
Steps taken:

1. copied and pasted all files for this tutorial
2. restarted with gatsby develop with each file change looking for where the issue was
3. object structure is fine in graphiQL ( I get the title when queried )
4. gatsby-config.js is in root
5. tried a different browser

[heyalbert]

I had the same issue: TypeError: Cannot read property 'site' of undefined.
Solved it by restarting the server: gatsby develop

[althe3rd]

Did anyone ever find a solution to this? I am getting this as well having tried everything suggested but don't see a solution suggested.

[oreny1]

@SilasOtoko solution solved the issue for me the tl;dr is move the gatsby-config.js file to the root directory.

[AlbertWhite]

For me the problem is that we should give a name to the query.

From

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

To

export const query = graphql`
  query SiteQuery{
    site {
      siteMetadata {
        title
      }
    }
  }
`

For me there is a problem with the source code from the tutorial.

[whiteleopard0424]

it is not working

[sizco29]

Make sure you are under a page component because graphql works for page components and useStaticQuery works better in non-page components, that can be causing the error.

const data = useStaticQuery( graphql
query {
site {
siteMetadata {
title
}
}
}
)