Material-ui: Hooks are crashing functional components

[mboeddeker]

If I want to use the new Hook Api inside es6 components, I will get this error:

Uncaught TypeError: Object(...) is not a function
    at BottomBar (index.jsx:9)
    at mountIndeterminateComponent (react-dom.development.js:15167)
    at beginWork (react-dom.development.js:15692)
    at performUnitOfWork (react-dom.development.js:18750)
    at workLoop (react-dom.development.js:18791)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:17998)
    at renderRoot (react-dom.development.js:18909)
    at performWorkOnRoot (react-dom.development.js:19812)
    at performWork (react-dom.development.js:19722)
    at performSyncWork (react-dom.development.js:19696)
    at requestWork (react-dom.development.js:19551)
    at scheduleWork (react-dom.development.js:19358)
    at scheduleRootUpdate (react-dom.development.js:20062)
    at updateContainerAtExpirationTime (react-dom.development.js:20088)
    at updateContainer (react-dom.development.js:20156)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:20435)
    at react-dom.development.js:20589
    at unbatchedUpdates (react-dom.development.js:19939)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:20585)
    at Object.render (react-dom.development.js:20652)
    at Module../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object.0 (theme.js:3)
    at __webpack_require__ (bootstrap:782)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
BottomBar @ index.jsx:9
mountIndeterminateComponent @ react-dom.development.js:15167
beginWork @ react-dom.development.js:15692
performUnitOfWork @ react-dom.development.js:18750
workLoop @ react-dom.development.js:18791
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
replayUnitOfWork @ react-dom.development.js:17998
renderRoot @ react-dom.development.js:18909
performWorkOnRoot @ react-dom.development.js:19812
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
scheduleRootUpdate @ react-dom.development.js:20062
updateContainerAtExpirationTime @ react-dom.development.js:20088
updateContainer @ react-dom.development.js:20156
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20435
(anonymous) @ react-dom.development.js:20589
unbatchedUpdates @ react-dom.development.js:19939
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20585
render @ react-dom.development.js:20652
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ theme.js:3
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1452 The above error occurred in the <BottomBar> component:
    in BottomBar (created by WithStyles(BottomBar))
    in WithStyles(BottomBar) (at App.js:16)
    in MuiThemeProviderOld (at App.js:13)
    in div (at App.js:12)
    in App (at src/index.js:7)

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.
function.console.(anonymous function) @ index.js:1452
logCapturedError @ react-dom.development.js:16489
logError @ react-dom.development.js:16524
update.callback @ react-dom.development.js:17499
callCallback @ react-dom.development.js:11592
commitUpdateEffects @ react-dom.development.js:11632
commitUpdateQueue @ react-dom.development.js:11622
commitLifeCycles @ react-dom.development.js:16779
commitAllLifeCycles @ react-dom.development.js:18160
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18365
completeRoot @ react-dom.development.js:19894
performWorkOnRoot @ react-dom.development.js:19817
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
scheduleRootUpdate @ react-dom.development.js:20062
updateContainerAtExpirationTime @ react-dom.development.js:20088
updateContainer @ react-dom.development.js:20156
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20435
(anonymous) @ react-dom.development.js:20589
unbatchedUpdates @ react-dom.development.js:19939
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20585
render @ react-dom.development.js:20652
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ theme.js:3
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
react-dom.development.js:19782 Uncaught TypeError: Object(...) is not a function
    at BottomBar (index.jsx:9)
    at mountIndeterminateComponent (react-dom.development.js:15167)
    at beginWork (react-dom.development.js:15692)
    at performUnitOfWork (react-dom.development.js:18750)
    at workLoop (react-dom.development.js:18791)
    at renderRoot (react-dom.development.js:18876)
    at performWorkOnRoot (react-dom.development.js:19812)
    at performWork (react-dom.development.js:19722)
    at performSyncWork (react-dom.development.js:19696)
    at requestWork (react-dom.development.js:19551)
    at scheduleWork (react-dom.development.js:19358)
    at scheduleRootUpdate (react-dom.development.js:20062)
    at updateContainerAtExpirationTime (react-dom.development.js:20088)
    at updateContainer (react-dom.development.js:20156)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:20435)
    at react-dom.development.js:20589
    at unbatchedUpdates (react-dom.development.js:19939)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:20585)
    at Object.render (react-dom.development.js:20652)
    at Module../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object.0 (theme.js:3)
    at __webpack_require__ (bootstrap:782)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
BottomBar @ index.jsx:9
mountIndeterminateComponent @ react-dom.development.js:15167
beginWork @ react-dom.development.js:15692
performUnitOfWork @ react-dom.development.js:18750
workLoop @ react-dom.development.js:18791
renderRoot @ react-dom.development.js:18876
performWorkOnRoot @ react-dom.development.js:19812
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
scheduleRootUpdate @ react-dom.development.js:20062
updateContainerAtExpirationTime @ react-dom.development.js:20088
updateContainer @ react-dom.development.js:20156
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20435
(anonymous) @ react-dom.development.js:20589
unbatchedUpdates @ react-dom.development.js:19939
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20585
render @ react-dom.development.js:20652
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ theme.js:3
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1

Heres my Code:

import React, { useState } from "react";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import RestoreIcon from "@material-ui/icons/Restore";
import FavoriteIcon from "@material-ui/icons/Favorite";
import LocationOnIcon from "@material-ui/icons/LocationOn";
import withStyles from "@material-ui/core/styles/withStyles";

const BottomBar = props => {
  const [index, setIndex] = useState(0);
  const handleChange = (event, value) => {
    setIndex(value);
  };

  return (
    <BottomNavigation value={index} showLabels onChange={handleChange} className={props.classes.root}>
      <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
      <BottomNavigationAction label="News" icon={<RestoreIcon />} />
      <BottomNavigationAction label="Favorites" icon={<LocationOnIcon />} />
    </BottomNavigation>
  );
};

const styles = theme => ({
  root: {
    width: 500
  }
});

export default withStyles(styles)(BottomBar);

[thevarunraja]

weird, @mboeddeker The same code is working for me. Which version of REACT and REACT-DOM are you running.

[mboeddeker]

@thevarunraja

"react": "^16.6.3",
    "react-dom": "^16.6.3",

[TrySound]

@mboeddeker Hooks are landed in 16.7.0-alpha.0

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[SistemasSouza]

I have the same a problem, with react 16.8.4

my code

import React, {useState} from 'react';

export default Counter => {
const [state, setState] = useState([])
return(

Counter

)
}