Gatsby: Destructuring the useContext value isn't working during gatsby build

[decimoseptimo]

Given a...
provider:

<CartContext.Provider value={['asd','123']} >
    {props.children}
  </CartContext.Provider>

consumer:

  const value = useContext(CartContext)
  const [state, dispatch] = value

  console.log(value)
  console.log(state)
  console.log(dispatch)

--

browser logs after gatsby develop:

(2) ["asd", "123"]0: "asd"1: "123"length: 2__proto__: Array(0)
header.js:22 asd
header.js:22 123

gatsby build returns:

WebpackError: TypeError: value is not iterable

It seems that destructuring the useContext value isn't working during gatsby build. Array destructuring does work in itself.

Any recommendations? Im using the default starter.

[wardpeet]

could you provide us with some more information about your environment?

Run gatsby info --clipboard in your project directory and paste the output here.

[decimoseptimo]

  System:
    OS: Windows 10
    CPU: (2) x64 AMD Athlon(tm) II X2 250 Processor
  Binaries:
    npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: ^2.13.31 => 2.13.31 
    gatsby-image: ^2.2.6 => 2.2.6 
    gatsby-plugin-manifest: ^2.2.3 => 2.2.3 
    gatsby-plugin-offline: ^2.2.4 => 2.2.4 
    gatsby-plugin-react-helmet: ^3.1.2 => 3.1.2 
    gatsby-plugin-sharp: ^2.2.8 => 2.2.8 
    gatsby-source-filesystem: ^2.1.5 => 2.1.5 
    gatsby-transformer-sharp: ^2.2.4 => 2.2.4 

Check repo: https://github.com/decimoseptimo/test

EDIT:
Seems that context provided in gatsby-browser (wrapRootElement), intended to be used in page components. Isn't available during SSR. I never thought of this before.

[universse]

You also need to wrapRootElement in gatsby-ssr.js

[wardpeet]

Yes, seems like you need to wrap ssr as well like @universse suggested.

Have a look at our redux example to get more insights https://github.com/gatsbyjs/gatsby/tree/da0cbab7913b59f49b84ee9afd8189cd66dbec43/examples/using-redux on what's a good pattern for this.

[wardpeet]

Thanks for opening this issue! It seems like we’ve provided enough information to make an informed decision.

If this is not the case, or if we can help further--please don’t hesitate to reach out or comment on this issue, and we’d love to take another look.

Thanks for using Gatsby 💪

[whalesingswee]

I was receiving this issue as well on useContext, problem solved with adding wrapRootElement on gatsby-ssr.js as stated, initially I only had it on gatsby-node.js.