"Invalid hook call" in ThemeProvider

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

My app should render

Current Behavior 😯

When loading the webpage I get the following error:

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.

This is the call stack:

invariant (react.development.js:95)
resolveDispatcher (react.development.js:1436)
useContext (react.development.js:1441)
useTheme (useTheme.js:9)
ThemeProvider (ThemeProvider.js:42)
renderWithHooks (VM263664 react-dom.development.js:12938)
mountIndeterminateComponent (VM263664 react-dom.development.js:15020)
beginWork (VM263664 react-dom.development.js:15625)
performUnitOfWork (VM263664 react-dom.development.js:19312)
workLoop (VM263664 react-dom.development.js:19352)
callCallback (VM263664 react-dom.development.js:149)
invokeGuardedCallbackDev (VM263664 react-dom.development.js:199)
invokeGuardedCallback (VM263664 react-dom.development.js:256)
replayUnitOfWork (VM263664 react-dom.development.js:18578)
renderRoot (VM263664 react-dom.development.js:19468)
performWorkOnRoot (VM263664 react-dom.development.js:20342)
performWork (VM263664 react-dom.development.js:20254)
performSyncWork (VM263664 react-dom.development.js:20228)
requestWork (VM263664 react-dom.development.js:20097)
scheduleWork (VM263664 react-dom.development.js:19911)
scheduleRootUpdate (VM263664 react-dom.development.js:20572)
updateContainerAtExpirationTime (VM263664 react-dom.development.js:20600)
updateContainer (VM263664 react-dom.development.js:20657)
ReactRoot.render (VM263664 react-dom.development.js:20953)
legacyRenderSubtreeIntoContainer (react-dom.development.js:21105)
render (react-dom.development.js:21155)
(anonymous) (index.jsx:35)
./client/index.jsx (bundle.js:1047)
__webpack_require__ (bundle.js:724)
fn (bundle.js:101)
(anonymous) (client:3)
1 (bundle.js:45842)
__webpack_require__ (bundle.js:724)
(anonymous) (bundle.js:791)
(anonymous) (bundle.js:794)

Steps to Reproduce 🕹

This is the code I used. This worked before I updated to React 16.8 and Material-UI 4.0.0 (I was running React 15.x and Material-UI 0.x before, so I needed to make some changes)

import "core-js/stable"
import "regenerator-runtime/runtime"
import './css/flexboxgrid.css'
import './css/font-awesome.css'
import './css/style.css'
import CssBaseline from '@material-ui/core/CssBaseline'
import ReactDOM from 'react-dom'
import React from 'react'

import {store} from './store'
import {Provider} from 'react-redux'
import { ThemeProvider } from '@material-ui/styles'
import Application from './view/application'
import {muiTheme} from './theme'

ReactDOM.render(
  <ThemeProvider theme={muiTheme}>
    <CssBaseline/>
    <Provider store={store}>
      <Application/>
    </Provider>
  </ThemeProvider>,
  document.querySelector(".application")
);

All my components are implemented as React classes : export default class .... extends React.Component

I also tested this:

ReactDOM.render(
  <div>
    <CssBaseline/>
    <Provider store={store}>
      <Application/>
    </Provider>
  </div>,
  document.querySelector(".application")
);

But I got the same error. Call stack:

invariant (react.development.js:95)
resolveDispatcher (react.development.js:1436)
useContext (react.development.js:1441)
useTheme (useTheme.js:9)
(anonymous) (makeStyles.js:243)
CssBaseline (CssBaseline.js:56)
renderWithHooks (VM271414 react-dom.development.js:12938)
mountIndeterminateComponent (VM271414 react-dom.development.js:15020)
beginWork (VM271414 react-dom.development.js:15625)
performUnitOfWork (VM271414 react-dom.development.js:19312)
workLoop (VM271414 react-dom.development.js:19352)
callCallback (VM271414 react-dom.development.js:149)
invokeGuardedCallbackDev (VM271414 react-dom.development.js:199)
invokeGuardedCallback (VM271414 react-dom.development.js:256)
replayUnitOfWork (VM271414 react-dom.development.js:18578)
renderRoot (VM271414 react-dom.development.js:19468)
performWorkOnRoot (VM271414 react-dom.development.js:20342)
performWork (VM271414 react-dom.development.js:20254)
performSyncWork (VM271414 react-dom.development.js:20228)
requestWork (VM271414 react-dom.development.js:20097)
scheduleWork (VM271414 react-dom.development.js:19911)
scheduleRootUpdate (VM271414 react-dom.development.js:20572)
updateContainerAtExpirationTime (VM271414 react-dom.development.js:20600)
updateContainer (VM271414 react-dom.development.js:20657)
ReactRoot.render (VM271414 react-dom.development.js:20953)
legacyRenderSubtreeIntoContainer (react-dom.development.js:21105)
render (react-dom.development.js:21155)
(anonymous) (index.jsx:35)
./client/index.jsx (bundle.js:1047)
__webpack_require__ (bundle.js:724)
fn (bundle.js:101)
(anonymous) (client:3)
1 (bundle.js:45842)
__webpack_require__ (bundle.js:724)
(anonymous) (bundle.js:791)
(anonymous) (bundle.js:794)

When checking the parameters in the call stack it bails out when rendering the very first Material-UI component it encounters.

Context 🔦

I am trying to open my React app

Your Environment 🌎

Tech	Version
Material-UI	v4.0.0
React	v16.8.6
Browser	Chrome 74.0.3729.157

[dotansimha]

We had a very similar issue in https://github.com/dotansimha/graphql-code-generator . I found out that this caused it in our case:

We are using Yarn Workspaces for monorepo, and we had the following structure:

packages/
  - a <- Part of the workspace, NodeJS library
  - b <- Part of the workspace, NodeJS library
  - c <- Part of the workspace, NodeJS library
  - website <- NOT Part of the workspace, and has a dependency for React
     - live-demo <- Part of the workspace, React app

The website dir is not part of the workspace, but when trying to run live-demo, it causes the same error you’re having. If I add website to the Workspace, it seems to work. If I remove manually website/node_modules/react and website/node_modules/react-dom - everything works.

So basically, something causes React to think that there are 2 different copies of React/ReactDOM (as mentioned in the error).

[disjunction]

An addition to the comment from @dotansimha: we are using lerna and I got the same error when trying to use the theme from a different package. The solution was to set not only react but also the react-dom as a peer dependency.