reactjs - Receiving "props.children is not a function" error when attempting to deploy my Gatsby site

Question

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

question from:https://stackoverflow.com/questions/65877262/receiving-props-children-is-not-a-function-error-when-attempting-to-deploy-my

Answer 1

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.