Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hooks are crashing functional components

See original GitHub issue

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);