Gatsby build fail useContext - hello-world-starter

[avi312singh]

Description

Gatsby is failing to complete a successful build when I am using the react useContext hook. Not sure why this is happening

Steps to reproduce

DarkThemeContext.js

import React, { useState, useContext } from "react"

const DarkThemeContext = React.createContext({
  darkMode: false,
  setDarkMode: () => {},
})

export const DarkThemeProvider = ({ children }) => {
  const [isDark, setIsDark] = useState(false)

  return (
    <DarkThemeContext.Provider
      value={{
        darkMode: isDark,
        setDarkMode: setIsDark,
      }}
    >
      {children}
    </DarkThemeContext.Provider>
  )
}

const useDarkThemeContext = () => useContext(DarkThemeContext);

export default useDarkThemeContext;

gatsby-browser.js

import React from "react"

import { DarkThemeProvider } from './src/pages/components/DarkThemeContext/DarkThemeContext'

export const wrapRootElement = ({ element }) => {
  return <DarkThemeProvider>{element}</DarkThemeProvider>
}

failed Building static HTML for pages - 1.173s
ERROR #95313
Building static HTML failed for path "/components/DarkThemeContext/DarkThemeContext/"

- static-entry.js:263
gatsby-starter-hello-world/.cache/static-entry.js:263:20

Objects are not valid as a React child (found: object with keys {darkMode, setDarkMode}). If you meant to render a collection of children, use an array instead.

Expected result

Gatsby build should complete succesfully

Actual result

Gatsby build does not succesfully

Environment

System:
OS: macOS 11.4
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.0.0 - ~/.nvm/versions/node/v14.0.0/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v14.0.0/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 91.0.4472.114
Edge: 91.0.864.48
Firefox: 80.0.1
Safari: 14.1.1
npmPackages:
gatsby: ^3.6.2 => 3.7.2
gatsby-plugin-material-ui: ^3.0.1 => 3.0.1
gatsby-plugin-react-helmet: ^4.7.0 => 4.7.1
gatsby-source-graphql: ^3.0.0 => 3.7.1
npmGlobalPackages:
gatsby-cli: 3.7.1

[avi312singh]

https://github.com/avi312singh/FTYD-Fe/blob/main/gatsby-browser.js

Here is the commit which seems to have broken gatsby build: avi312singh/FTYD-Fe@9206f48. (useContext was introduced)

More build history on gatsby cloud (https://www.gatsbyjs.com/dashboard/5254933f-7a05-4838-825a-5f2b7dc19dd9/sites/33ff7dea-2af8-43f0-8155-23f89bf5f6f0/deploys)

[LekoArts]

This is an issue with your code as a minimal example shows that it works in Gatsby: https://codesandbox.io/s/usecontext-in-gatsby-2oylw

Feel free to use that as a reference for your project.

[avi312singh]

Hi thanks - did you make any changes ? Still can't seem to see what the issue is on build... gatsby develop works fine @LekoArts

[avi312singh]

Hi this was resolved by moving components outside of src/pages
Gatsby was trying to generate page for each component folder during build and it got DarkThemeContext (with no JSX being inside) and webpack failed to render any html at

- static-entry.js:263
gatsby-starter-hello-world/.cache/static-entry.js:263:20