Getting "Objects are not valid as a React child" when using Gatsby wrapRootElement TypeScript

Question

I am trying to implement a theme provider in Gatsby using the wrapRootElement browser API. I've been looking at examples online and can't find where I went wrong. I am getting an error "Objects are not valid as a React child (found: object with keys {children})."

This is the first time I'm using Gatsby browser API, I know the problem is with the children I'm trying to pass down, with the element being an object, but looking at all the examples I can find online they are implemented the same way.

gatsby-browser.js

import React from "react"

import ThemeWrapper from './src/components/theme/theme'

export function wrapRootElement({ element }) {
    return <ThemeWrapper>{element}</ThemeWrapper>
}

theme.tsx

import * as React from "react"
import { ThemeProvider } from "@material-ui/styles"
import { CssBaseline } from "@material-ui/core"

import ThemeContext from "./themecontext"
import { defaultTheme, darkTheme } from "./themedefinition"

const ThemeWrapper = (children: React.ReactNode) => {

  const [isDarkTheme, setDarkTheme] = React.useState(false);

  const toggleDark = () => {
    setDarkTheme(!isDarkTheme);
  }

  React.useEffect(() => {
    if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) {
      setDarkTheme(true);
    }
  }, [])

  return (
    <ThemeContext.Provider value={{isDarkTheme, toggleDark}}>
      <ThemeProvider theme={isDarkTheme ? darkTheme : defaultTheme}>
        <CssBaseline />
        {children}
      </ThemeProvider>
    </ThemeContext.Provider>
  )
}

export default ThemeWrapper

Answer 1

Looks like a simple typo: you aren't destructuring children from your props, you're naming the first argument (the props) children .

- const ThemeWrapper = (children: React.ReactNode) => {
+ const ThemeWrapper = ({ children: React.ReactNode }) => {