Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useContext breaks build "TypeError: Object is not iterable"

See original GitHub issue

Description

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

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

Issue Analytics

State:
Created 3 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

4reactions

pi0neerpatcommented, Mar 24, 2020

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!

0reactions

pi0neerpatcommented, Mar 24, 2020

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

Thanks for the helpful discussion @herecydev. I still ❤️ Gatsby hehe

Top Results From Across the Web

Object is not iterable Error while Using React-Context

I get TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)) which to me means that users is not an array? But it...

object is not iterable (cannot read property symbol ... - You.com

When ever i am using useContext in the js file, it gives the error "TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))"....

useContext - React Docs

A JavaScript library for building user interfaces.

Object is not iterable when working with react context-Reactjs

Coding example for the question TypeError: Object is not iterable when working with react ... score:3. const { board, setBoard } = useContext(BoardContext);....

React.js — Basic Hooks (useState, useEffect, & useContext)

Also, if you're not familiar with React.js, might I suggest ... state object will be far more costly than if you were to...