Theme-ui: Invalid hook call...my code or something else?

[ehowey]

Hi Jackson,

I have been having headaches with Gatsby since updating a few dependencies. Had it working again and then ran into this error and have been trying to solve it for a few hours with no luck. Can you let me know if this is me or something actually in theme-ui?

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at invariant (http://localhost:8000/commons.js:64273:15)
    at resolveDispatcher (http://localhost:8000/commons.js:65621:28)
    at useContext (http://localhost:8000/commons.js:65626:20)
    at useThemeUI (http://localhost:8000/commons.js:63831:66)
    at ThemeProvider (http://localhost:8000/commons.js:64096:15)
    at renderWithHooks (http://localhost:8000/commons.js:29216:18)
    at mountIndeterminateComponent (http://localhost:8000/commons.js:31450:13)
    at beginWork$1 (http://localhost:8000/commons.js:32594:16)
    at HTMLUnknownElement.callCallback (http://localhost:8000/commons.js:14459:14)
    at Object.invokeGuardedCallbackDev (http://localhost:8000/commons.js:14509:16)
    at invokeGuardedCallback (http://localhost:8000/commons.js:14566:31)
    at beginWork$$1 (http://localhost:8000/commons.js:37325:7)
    at performUnitOfWork (http://localhost:8000/commons.js:36319:12)
    at workLoopSync (http://localhost:8000/commons.js:36293:22)
    at renderRoot (http://localhost:8000/commons.js:35986:11)
    at scheduleUpdateOnFiber (http://localhost:8000/commons.js:35527:22)
    at scheduleRootUpdate (http://localhost:8000/commons.js:38427:3)
    at updateContainerAtExpirationTime (http://localhost:8000/commons.js:38455:10)
    at updateContainer (http://localhost:8000/commons.js:38544:10)
    at http://localhost:8000/commons.js:39071:7
    at unbatchedUpdates (http://localhost:8000/commons.js:35795:12)
    at legacyRenderSubtreeIntoContainer (http://localhost:8000/commons.js:39070:5)
    at render (http://localhost:8000/commons.js:39199:12)
    at http://localhost:8000/commons.js:67658:891
index.js:2177 The above error occurred in the <ThemeProvider> component:
    in ThemeProvider
    in _default (at app.js:67)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Here are the dependencies from my theme, running on Gatsby 2.15.1

 "dependencies": {
    "@emotion/core": "^10.0.16",
    "@mdx-js/mdx": "^1.4.0",
    "@mdx-js/react": "^1.4.0",
    "deepmerge": "^4.0.0",
    "gatsby-image": "^2.2.15",
    "gatsby-plugin-manifest": "^2.2.12",
    "gatsby-plugin-mdx": "^1.0.33",
    "gatsby-plugin-offline": "^3.0.0",
    "gatsby-plugin-react-helmet": "^3.1.5",
    "gatsby-plugin-robots-txt": "^1.5.0",
    "gatsby-plugin-sharp": "^2.2.18",
    "gatsby-plugin-sitemap": "^2.2.9",
    "gatsby-plugin-theme-ui": "^0.2.38",
    "gatsby-remark-copy-linked-files": "^2.1.13",
    "gatsby-remark-images": "^3.1.19",
    "gatsby-remark-smartypants": "^2.1.5",
    "gatsby-source-filesystem": "^2.1.18",
    "gatsby-transformer-sharp": "^2.2.12",
    "prop-types": "^15.7.2",
    "react-helmet": "^5.2.1",
    "react-icons": "^3.7.0",
    "react-scroll": "^1.7.14",
    "theme-ui": "^0.2.38"
  },

Here is where I pull theme-ui into my theme...I have wondered whether there is something here causing the problem but have exhausted my tries at fixing it.

import React, { Component } from "react"
import { css, Global } from "@emotion/core"
import { Layout } from "theme-ui"
import Header from "./header"
import Main from "./main"
import Container from "./container"
import Footer from "./footer"

class SiteLayout extends Component {
  constructor(props) {
    super(props)

    // Bind the this context to the handler function
    this.toggleMobileMenu = this.toggleMobileMenu.bind(this)
    this.closeMobileMenu = this.closeMobileMenu.bind(this)

    // Set some state
    this.state = {
      mobileMenuOpen: false,
    }
  }

  toggleMobileMenu = () => {
    this.setState(prevState => ({ mobileMenuOpen: !prevState.mobileMenuOpen }))
  }

  //This function is necessary for the onepage theme to ensure the menu closes without a page change.
  closeMobileMenu = () => {
    if (this.state.mobileMenuOpen) {
      this.setState({ mobileMenuOpen: false })
    }
  }
  render() {
    return (
      <Layout>
        <Global
          styles={css`
            html {
              box-sizing: border-box;
            }

            *,
            *:before,
            *:after {
              box-sizing: inherit;
            }

            body {
              margin: 0;
              padding: 0;
            }
          `}
        />
        <Header
          open={this.state.mobileMenuOpen}
          toggle={e => {
            this.toggleMobileMenu(e)
          }}
          close={e => {
            this.closeMobileMenu(e)
          }}
        />
        <Main>
          <Container>{this.props.children}</Container>
        </Main>
        <Footer />
      </Layout>
    )
  }
}

export default SiteLayout

[andrewmenich]

See #283

Try removing your node_modules folder as well as package.lock and yarn.lock and reinstalling.

[ehowey]

That fixed it!! I can't believe I missed that original issue in my searches. I think I might have been searching in the main gatsby repo. I spent a ridiculous amount of time on that yesterday.