{"action":"closed","issue":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/8896","repository_url":"https://api.github.com/repos/gatsbyjs/gatsby","labels_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/8896/labels{/name}","comments_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/8896/comments","events_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/8896/events","html_url":"https://github.com/gatsbyjs/gatsby/issues/8896","id":367594055,"node_id":"MDU6SXNzdWUzNjc1OTQwNTU=","number":8896,"title":"Using React Context within wrapRootElement fails with 'Objects are not valid as a React child (found: [object Module])'.","user":{"login":"ButterBridge","id":20483304,"node_id":"MDQ6VXNlcjIwNDgzMzA0","avatar_url":"https://avatars3.githubusercontent.com/u/20483304?v=4","gravatar_id":"","url":"https://api.github.com/users/ButterBridge","html_url":"https://github.com/ButterBridge","followers_url":"https://api.github.com/users/ButterBridge/followers","following_url":"https://api.github.com/users/ButterBridge/following{/other_user}","gists_url":"https://api.github.com/users/ButterBridge/gists{/gist_id}","starred_url":"https://api.github.com/users/ButterBridge/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ButterBridge/subscriptions","organizations_url":"https://api.github.com/users/ButterBridge/orgs","repos_url":"https://api.github.com/users/ButterBridge/repos","events_url":"https://api.github.com/users/ButterBridge/events{/privacy}","received_events_url":"https://api.github.com/users/ButterBridge/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-10-07T21:07:39Z","updated_at":"2018-10-07T21:58:48Z","closed_at":"2018-10-07T21:58:48Z","author_association":"NONE","body":"## Description\r\n\r\nHi, now that Layout has changed in Gatsby v2 so I can no longer use it as a React Context Provider, I am trying to get to grips with the wrapRootElement API as an alternative. However so far I haven't had any luck - I get the error message I've written in the title. I can't find any other examples online of people using React Context as a state provider with this API - only redux - so perhaps it's not possible.\r\n\r\nMany thanks to anyone that takes the time to help!\r\n\r\n### Steps to reproduce\r\n\r\nHere's the code in gatsby-browser.js. Somewhat disconcertingly I'm not able to console.log anything in the render method. I'll put together a demo if nobody knows the fix easily offhand...\r\n\r\n```\r\nimport React from \"react\";\r\nimport PT from \"prop-types\";\r\n\r\nexport const AuthContext = React.createContext();\r\n\r\nexport class wrapRootElement extends React.Component {\r\n  state = {\r\n    code: \"TEMP CODE HERE\",\r\n    codeInputted: false,\r\n  };\r\n\r\n  attemptCodeInput = (codeAttempt) => {\r\n    const { code } = this.state;\r\n    if (codeAttempt === code) {\r\n      this.setState({\r\n        codeInputted: true,\r\n      });\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const { element } = this.props;\r\n    const { codeInputted } = this.state;\r\n    return (\r\n      <AuthContext.Provider\r\n        value={{\r\n          codeInputted,\r\n          attemptCodeInput: this.attemptCodeInput,\r\n        }}\r\n      >\r\n        {element}\r\n      </AuthContext.Provider>\r\n    );\r\n  }\r\n}\r\n```\r\n\r\n### Expected result\r\n\r\nI should be able to use my AuthContext.Consumer in other parts of my project...\r\n\r\n### Actual result\r\n\r\n...but just getting this error and a white screen at the moment:\r\n\r\n\r\nHere's the error message in full - it repeats several times. As you can see it doesn't point to any of 'my' code in the directory. I'm assuming it's an error that comes from React rather than Gatsby but I don't know.\r\n```\r\nUncaught Error: Objects are not valid as a React child (found: [object Module]). If you meant to render a collection of children, use an array instead.\r\n    in _default (created by HotExported_default)\r\n    in AppContainer (created by HotExported_default)\r\n    in HotExported_default (at app.js:55)\r\n    at invariant (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:55)\r\n    at throwOnInvalidObjectType (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:12223)\r\n    at reconcileChildFibers (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:12997)\r\n    at reconcileChildren (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:13382)\r\n    at finishClassComponent (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:13556)\r\n    at mountIndeterminateComponent (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:13773)\r\n    at beginWork (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:14068)\r\n    at performUnitOfWork (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:16415)\r\n    at workLoop (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:16453)\r\n    at HTMLUnknownElement.callCallback (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:145)\r\n    at Object.invokeGuardedCallbackDev (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:195)\r\n    at invokeGuardedCallback (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:248)\r\n    at replayUnitOfWork (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:15744)\r\n    at renderRoot (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:16547)\r\n    at performWorkOnRoot (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17386)\r\n    at performWork (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17294)\r\n    at performSyncWork (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17266)\r\n    at requestWork (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17154)\r\n    at scheduleWork (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:16948)\r\n    at scheduleRootUpdate (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17636)\r\n    at updateContainerAtExpirationTime (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17663)\r\n    at updateContainer (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17690)\r\n    at ReactRoot.render (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17956)\r\n    at eval (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:18096)\r\n    at unbatchedUpdates (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17517)\r\n    at legacyRenderSubtreeIntoContainer (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:18092)\r\n    at render (Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:18151)\r\n    at eval (VM18273 app.js:97)\r\ninvariant @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:55\r\nthrowOnInvalidObjectType @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:12223\r\nreconcileChildFibers @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:12997\r\nreconcileChildren @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:13382\r\nfinishClassComponent @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:13556\r\nmountIndeterminateComponent @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:13773\r\nbeginWork @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:14068\r\nperformUnitOfWork @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:16415\r\nworkLoop @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:16453\r\ncallCallback @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:145\r\ninvokeGuardedCallbackDev @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:195\r\ninvokeGuardedCallback @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:248\r\nreplayUnitOfWork @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:15744\r\nrenderRoot @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:16547\r\nperformWorkOnRoot @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17386\r\nperformWork @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17294\r\nperformSyncWork @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17266\r\nrequestWork @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17154\r\nscheduleWork @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:16948\r\nscheduleRootUpdate @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17636\r\nupdateContainerAtExpirationTime @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17663\r\nupdateContainer @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17690\r\nReactRoot.render @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17956\r\n(anonymous) @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:18096\r\nunbatchedUpdates @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:17517\r\nlegacyRenderSubtreeIntoContainer @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:18092\r\nrender @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-dom/cjs/react-dom.development.js:18151\r\n(anonymous) @ VM18273 app.js:97\r\nsetTimeout (async)\r\n(anonymous) @ Users/Althea/code/work/cheshire-community-choirs-website/node_modules/domready/ready.js:26\r\n(anonymous) @ VM18273 app.js:96\r\nPromise.then (async)\r\n(anonymous) @ VM18273 app.js:94\r\nPromise.then (async)\r\n(anonymous) @ VM18273 app.js:51\r\n(anonymous) @ VM18273 app.js:139\r\n./.cache/app.js @ commons.js:827\r\n__webpack_require__ @ commons.js:725\r\nfn @ commons.js:102\r\n(anonymous) @ Users/Althea/code/work/cheshire-community-choirs-website/multi_/Users/Althea/code/work/cheshire-community-choirs-website/node_modules/react-hot-loader/patch.js_/Users/Althea/code/work/cheshire-community-choirs-website/node_modules/webpack-hot-middleware/client.js?path=http:/localhost:8000/__webpack_hmr&reload=true&overlay=false_/Users/Althea/code/work/cheshire-community-choirs-website/.cache/app:3\r\n0 @ commons.js:3559\r\n__webpack_require__ @ commons.js:725\r\n(anonymous) @ commons.js:792\r\n(anonymous) @ commons.js:795\r\nUsers/Althea/code/work/cheshire-community-choirs-website/node_modules/react-error-overlay/lib/index.js:2172 The above error occurred in the <_default> component:\r\n    in _default (created by HotExported_default)\r\n    in AppContainer (created by HotExported_default)\r\n    in HotExported_default (at app.js:55)\r\n\r\nReact will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.\r\n```\r\n\r\n### Environment\r\n\r\nNote that I have gatsby-plugin-layout here from an earlier attempt to solve this that didn't work - it's not implemented at the moment.\r\n\r\n  System:\r\n    OS: OS X El Capitan 10.11.6\r\n    CPU: x64 Intel(R) Core(TM) i7-3520M CPU @ 2.90GHz\r\n    Shell: 3.2.57 - /bin/bash\r\n  Binaries:\r\n    Node: 9.8.0 - /usr/local/bin/node\r\n    npm: 6.2.0 - /usr/local/bin/npm\r\n  Browsers:\r\n    Chrome: 69.0.3497.100\r\n    Firefox: 61.0.2\r\n    Safari: 10.0.1\r\n  npmPackages:\r\n    gatsby: ^2.0.0 => 2.0.1 \r\n    gatsby-plugin-layout: ^1.0.3 => 1.0.3 \r\n    gatsby-plugin-netlify: ^2.0.0 => 2.0.0 \r\n    gatsby-plugin-netlify-cms: ^3.0.0 => 3.0.1 \r\n    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0 \r\n    gatsby-plugin-sass: ^2.0.1 => 2.0.1 \r\n    gatsby-plugin-sharp: ^2.0.5 => 2.0.5 \r\n    gatsby-remark-images: ^2.0.1 => 2.0.1 \r\n    gatsby-source-filesystem: ^2.0.1 => 2.0.1 \r\n    gatsby-transformer-remark: ^2.1.1 => 2.1.2 \r\n    gatsby-transformer-sharp: ^2.1.1 => 2.1.1 \r\n  npmGlobalPackages:\r\n    gatsby-cli: 1.1.58\r\n\r\n"}}
{"actor":{"display_login":"ButterBridge"}}