Gatsby: useContext breaks build "TypeError: Object is not iterable"

[pi0neerpat]

Description

gatsby develop works fine, but gatsby build fails with error. I've used context in other projects like this before, with no issue.

Related issue: https://github.com/gatsbyjs/gatsby/issues/16505

Steps to reproduce

https://github.com/pi0neerpat/gatsby-dumb-troubleshooter

Clone this repo, then run commands

yarn
yarn build

Expected result

Successfully build the app

Actual result

> gatsby build

# ...
failed Building static HTML for pages - 0.435s

 ERROR #95313

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  3 |
  4 | const IndexPage = () => {
> 5 |   const [context] = useContext(Context)
    |                     ^
  6 |
  7 |   return <div>Hello world: {JSON.stringify(context)}</div>
  8 | }


  WebpackError: TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))

  - index.js:5 IndexPage
    src/pages/index.js:5:21

  - index.js:17 Promise._resolveFromExecutor
    node_modules/prop-types/index.js:17:1


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment

> gatsby info

System:
  OS: Linux 4.4 Ubuntu 16.04.6 LTS (Xenial Xerus)
  CPU: (4) x64 Intel(R) Core(TM) i7-2620M CPU @ 2.70GHz
  Shell: 4.3.48 - /bin/bash
Binaries:
  Node: 12.15.0 - ~/.nvm/versions/node/v12.15.0/bin/node
  Yarn: 1.12.3 - /usr/bin/yarn
  npm: 6.13.4 - ~/.nvm/versions/node/v12.15.0/bin/npm
Languages:
  Python: 2.7.12 - /usr/bin/python
Browsers:
  Firefox: 74.0
npmPackages:
  gatsby: ^2.19.45 => 2.19.45
npmGlobalPackages:
  gatsby-cli: 2.10.9

[pi0neerpat]

Found the solution here!!! https://gitmemory.com/issue/gatsbyjs/gatsby/15968/514035350

Solution

You must also wrapRootElement in gatsby-ssr.js, not just gatsby-browser.js.

Discussion

This was a big blocker for me :( I never had this problem with other gatsby projects until now. Did something change? Or was I somehow skipping SSR builds in my other projects?

The following docs do not include the gatsby-ssr.js requirement and should be updated!

• https://www.gatsbyjs.org/docs/porting-from-create-react-app-to-gatsby/#context-providers
• https://www.gatsbyjs.org/blog/2019-01-31-using-react-context-api-with-gatsby/#reach-skip-nav

[herecydev]

You've used wrapRootElement but only supplied the gatsby-browser version of it, which affects the browser/client-side running of things, but not what happens when gatsby is server side rendering the pages, i.e. during gatsby build.

There a couple of ways to fix this, either:

1. Additionally implement the wrapRootElement in gatsby-ssr.js. Info here: https://www.gatsbyjs.org/docs/ssr-apis/#wrapRootElement
2. Provide a defaultValue when creating the context, i.e. createContext([]). This will ensure that if no ContextProvider is found in the react tree it will use that defaultValue

[herecydev]

The following docs do not include the gatsby-ssr.js requirement and should be updated!

Both of these use the 2nd option I've suggested by providing a default. So they are completely functional. Which approach you want to use sort of depends on what you're trying to accomplish

[pi0neerpat]

Thanks for the fast response!

Both of these use the 2nd option I've suggested by providing a default. So they are completely functional. Which approach you want to use sort of depends on what you're trying to accomplish

Oh man, I see now they are using a default value :man_facepalming:

I'm still not understanding why I didn't have this issue before though. See high-priests app which has no default useContext value, and no gatsby-ssr.js file. So strange....

At the very least, hopefully this issue will help someone else banging their head.

_Disclaimer: the repo I posted has private dependencies (only I can access) which cause the build to fail. But I promise it builds on my machine (tm). A production build is running live here_

[herecydev]

I'm still not understanding why I didn't have this issue before though. See high-priests app which has no default useContext value, and no gatsby-ssr.js file. So strange....

I don't think you can compare these 2 situations like for like. In that linked repo you are using dynamic imports. This is going to behave differently and the context won't try to be accessed when gatsby is trying to build out the pages.

[pi0neerpat]

Yup I think you're absolutely right about the dynamic imports. Never fails that SSR stuff makes my life miserable :man_dancing:

Thanks for the helpful discussion @herecydev. I still :heart: Gatsby hehe