0

Been reading other posts regarding this question but haven't been able to figure it out. Everything works fine in my development build but Netlify throws this error when I attempt to deploy:

4:58:48 PM:   WebpackError: TypeError: props.children is not a function
4:58:48 PM:   
4:58:48 PM:   - layout.js:90 
4:58:48 PM:     src/components/layout.js:90:20

My Layout component:

const Layout = props => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  ...

  const globals = {
    about: about,
    menu: menu,
    closeMenu: () => toggleMenu(false),
    song: song,
    handleSongChange: handleSongChange,
    videoLoop: videoLoop,
  }

  return (
    <>
      <Header
        siteTitle={data.site.siteMetadata?.title || `Title`}
      />
      <main>{props.children({ ...props, ...globals })}</main>
      <Footer />
    </>
  )
}

export default Layout

Using Layout in my Index page:

const IndexPage = () => {
  return (
    ...
    <Layout>
      {props => (
        <>
          //using props.menu, props.about, etc here
        </>
      )}
    </Layout>
  )
}

export default IndexPage
Brad
  • 9
  • 1
  • 1
    For starters, `children` should be some JSX elements, not a function. https://reactjs.org/docs/react-api.html#reactchildren – jmargolisvt Jan 25 '21 at 00:07
  • That's what I thought as well but it seems to be working here: https://stackoverflow.com/questions/58619678/receiving-props-children-is-not-a-function – Brad Jan 25 '21 at 03:00

1 Answers1

0

Sounds like you have a page that is doing something like this:

<Layout>Hi</Layout>

Or this:

<Layout />

In development, Gatsby is only serving you the pages you're viewing. When you run gatsby build, it is going to evaluate the code for every page that it's building, which is likely why you're discovering the issue when you build but not in development.

You really probably don't intend to use a function-as-child configuration for a Layout component, though.

coreyward
  • 77,547
  • 20
  • 137
  • 166