Material-ui: "Invalid hook call" in ThemeProvider

[ir-fuel]

• [x] This is not a v0.x issue.
• [x] 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 |

[oliviertassinari]

Could you share a live reproduction?

[ir-fuel]

I just tried a mini example on codesandbox.io but that worked. I'm going to comment out code on my side to see what triggers it

[ir-fuel]

Ok here you go:

https://github.com/ir-fuel/material-test

go to the root of the project, run npm install and then npm run development. Open your browser at localhost:8080

I left everything in package-lock.json as it is in the project I am using it in, I just removed all the source files and dumbed down the code to the bare minimum that produces the issue on my machine.

[ir-fuel]

I just cleaned it up even further. Removed a lot of files from package.json and some extra config files that weren't needed.

[oliviertassinari]

@ir-fuel Well done! Now, you can remove Material-UI and still reproduce the problem:

index.jsx

import ReactDOM from 'react-dom'
import React from 'react'

function Toolbar() {
  React.useRef();
  return <span>Wtf</span>
}

ReactDOM.render(
  <div><Toolbar /></div>,
  document.querySelector(".application")
);

I think that it makes a good reproduction for https://github.com/facebook/react/issues/15628. I'm closing as it's a problem between Webpack React and Babel.

[ConAntonakos]

I was able to reproduce without ThemeProvider. How does one go about resolving this now?

[oliviertassinari]

Could you share this reproduction?

[ConAntonakos]

Could you share this reproduction?

Unfortunately, not yet. 🙁 Still trying to figure out if it's an implementation error or something else. Thank you for staying in touch with this!

[ConAntonakos]

Ok, I noticed that when I transitioned to the new imports, my custom theme properties weren't being merged with createMuiTheme from material-ui/core/styles:

import { ThemeProvider } from '@material-ui/styles;
import { withStyles } from '@material-ui/styles';

Switching back to the previous worked:

import { MuiThemeProvider } from '@material-ui/core/styles;
import { withStyles } from '@material-ui/core/styles';

Example:

const theme = createMuiTheme({
  palette: {
    primary: {
      main: colors.BLUE,
    },
  },
  // An object that contains custom colors, etc.
  custom,
});

Then, when trying to use { withStyles } from '@material-ui/styles', my custom property from theme object from the styles function (styles = theme => ({ ... })) was undefined or empty.

[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).

[ankitjena]

@dotansimha This was the reason. Solved the problem. Thanks

[x5engine]

if this is not working then should not be part of the docs as working!!

using back import { withStyles } from '@material-ui/core/styles';

[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.