withStyles causes Typescript error on Fab - component prop is missing

[eddedd88]

The Fab component loses the component prop in Typescript after being used with withStyles

• 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 🤔

The higher order component created with withStyles should behave the same way as the original component

Current Behavior 😯

I get a typescript error when using the custom Fab created with withStyles

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/createreactappwithtypescript-7vxvf

See the error on the CustomFab example with the component prop, and no error on the other two examples.

Context 🔦

I can't upgrade to material-ui v4 because of the typescript errors

Your Environment 🌎

Tech	Version
Material-UI	v4.0.1
React	16.8.6
Browser	Chrome
TypeScript	3.4.5
etc.

[CaptainN]

I'm also getting this odd error using withStyles in various places:

Material-UI: the component displayName is invalid. It needs to be a string. Please fix the following component: [object Object].

I can file a separate issue if appropriate.

[GeeWee]

Potentially the same as #15827

[codeglider]

ThemeProvider and withStyles seems to be the problem. I think it's similar to the error I'm getting when I have those components showing up.

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 (webpack:///./node_modules/react/cjs/react.development.js?:88:15)
   at resolveDispatcher (webpack:///./node_modules/react/cjs/react.development.js?:1436:28)
   at Object.useContext (webpack:///./node_modules/react/cjs/react.development.js?:1441:20)
   at useTheme (webpack:///./node_modules/@material-ui/styles/esm/useTheme/useTheme.js?:9:55)
   at ThemeProvider (webpack:///./node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js?:42:77)
   at renderWithHooks (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:12938:18)
   at mountIndeterminateComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:15020:13)
   at beginWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:15625:16)
   at performUnitOfWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:19312:12)
   at workLoop (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:19352:24)

VM56 react-dom.development.js:17117 The above error occurred in the component:
in ThemeProvider
in App

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.
logCapturedError @ VM56 react-dom.development.js:17117
VM56 react-dom.development.js:20312 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 (webpack:///./node_modules/react/cjs/react.development.js?:88:15)
   at resolveDispatcher (webpack:///./node_modules/react/cjs/react.development.js?:1436:28)
   at Object.useContext (webpack:///./node_modules/react/cjs/react.development.js?:1441:20)
   at useTheme (webpack:///./node_modules/@material-ui/styles/esm/useTheme/useTheme.js?:9:55)
   at ThemeProvider (webpack:///./node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js?:42:77)
   at renderWithHooks (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:12938:18)
   at mountIndeterminateComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:15020:13)
   at beginWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:15625:16)
   at performUnitOfWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:19312:12)
   at workLoop (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:19352:24)

[codeglider]

I am trying to do something as simple as this, and I'm getting an error which breaking everything. Any ideas? seems related

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.getElementById('app'))

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 (webpack:///./node_modules/react/cjs/react.development.js?:88:15)
   at resolveDispatcher (webpack:///./node_modules/react/cjs/react.development.js?:1436:28)
   at Object.useContext (webpack:///./node_modules/react/cjs/react.development.js?:1441:20)
   at useTheme (webpack:///./node_modules/@material-ui/styles/esm/useTheme/useTheme.js?:9:55)
   at eval (webpack:///./node_modules/@material-ui/styles/esm/makeStyles/makeStyles.js?:243:91)
   at WithStyles (webpack:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js?:63:21)
   at renderWithHooks (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:12938:18)
   at updateForwardRef (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14457:20)
   at beginWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:15661:16)
   at performUnitOfWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:19312:12)
   invariant @ react.development.js:88
   resolveDispatcher @ react.development.js:1436
   useContext @ react.development.js:1441
   useTheme @ useTheme.js:9
   (anonymous) @ makeStyles.js:243
   WithStyles @ withStyles.js:63
   renderWithHooks @ VM25650 react-dom.development.js:12938
   updateForwardRef @ VM25650 react-dom.development.js:14457
   beginWork @ VM25650 react-dom.development.js:15661
   performUnitOfWork @ VM25650 react-dom.development.js:19312
   workLoop @ VM25650 react-dom.development.js:19352
   callCallback @ VM25650 react-dom.development.js:149
   invokeGuardedCallbackDev @ VM25650 react-dom.development.js:199
   invokeGuardedCallback @ VM25650 react-dom.development.js:256
   replayUnitOfWork @ VM25650 react-dom.development.js:18578
   renderRoot @ VM25650 react-dom.development.js:19468
   performWorkOnRoot @ VM25650 react-dom.development.js:20342
   performWork @ VM25650 react-dom.development.js:20254
   performSyncWork @ VM25650 react-dom.development.js:20228
   requestWork @ VM25650 react-dom.development.js:20097
   scheduleWork @ VM25650 react-dom.development.js:19911
   scheduleRootUpdate @ VM25650 react-dom.development.js:20572
   updateContainerAtExpirationTime @ VM25650 react-dom.development.js:20600
   updateContainer @ VM25650 react-dom.development.js:20657
   ReactRoot.render @ VM25650 react-dom.development.js:20953
   legacyRenderSubtreeIntoContainer @ react-dom.development.js:21105
   render @ react-dom.development.js:21155
   (anonymous) @ index.js:18
   ./src/index.js @ main.js:2819
   webpack_require @ main.js:724
   fn @ main.js:101
   (anonymous) @ client:3
   0 @ main.js:2830
   webpack_require @ main.js:724
   (anonymous) @ main.js:791
   (anonymous) @ main.js:794
   Show 6 more frames
   VM25650 react-dom.development.js:17117 The above error occurred in the <WithStyles(ForwardRef(Button))> component:
   in WithStyles(ForwardRef(Button))
   in App

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.
logCapturedError @ VM25650 react-dom.development.js:17117
logError @ VM25650 react-dom.development.js:17153
update.callback @ VM25650 react-dom.development.js:18065
callCallback @ VM25650 react-dom.development.js:16433
commitUpdateEffects @ VM25650 react-dom.development.js:16472
commitUpdateQueue @ VM25650 react-dom.development.js:16463
commitLifeCycles @ VM25650 react-dom.development.js:17383
commitAllLifeCycles @ VM25650 react-dom.development.js:18736
callCallback @ VM25650 react-dom.development.js:149
invokeGuardedCallbackDev @ VM25650 react-dom.development.js:199
invokeGuardedCallback @ VM25650 react-dom.development.js:256
commitRoot @ VM25650 react-dom.development.js:18948
(anonymous) @ VM25650 react-dom.development.js:20418
unstable_runWithPriority @ VM25652 scheduler.development.js:255
completeRoot @ VM25650 react-dom.development.js:20417
performWorkOnRoot @ VM25650 react-dom.development.js:20346
performWork @ VM25650 react-dom.development.js:20254
performSyncWork @ VM25650 react-dom.development.js:20228
requestWork @ VM25650 react-dom.development.js:20097
scheduleWork @ VM25650 react-dom.development.js:19911
scheduleRootUpdate @ VM25650 react-dom.development.js:20572
updateContainerAtExpirationTime @ VM25650 react-dom.development.js:20600
updateContainer @ VM25650 react-dom.development.js:20657
ReactRoot.render @ VM25650 react-dom.development.js:20953
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21105
render @ react-dom.development.js:21155
(anonymous) @ index.js:18
./src/index.js @ main.js:2819
webpack_require @ main.js:724
fn @ main.js:101
(anonymous) @ client:3
0 @ main.js:2830
webpack_require @ main.js:724
(anonymous) @ main.js:791
(anonymous) @ main.js:794
Show 5 more frames
VM25650 react-dom.development.js:20312 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 (webpack:///./node_modules/react/cjs/react.development.js?:88:15)
   at resolveDispatcher (webpack:///./node_modules/react/cjs/react.development.js?:1436:28)
   at Object.useContext (webpack:///./node_modules/react/cjs/react.development.js?:1441:20)
   at useTheme (webpack:///./node_modules/@material-ui/styles/esm/useTheme/useTheme.js?:9:55)
   at eval (webpack:///./node_modules/@material-ui/styles/esm/makeStyles/makeStyles.js?:243:91)
   at WithStyles (webpack:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js?:63:21)
   at renderWithHooks (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:12938:18)
   at updateForwardRef (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14457:20)
   at beginWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:15661:16)
   at performUnitOfWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:19312:12)

[SerdarSanri]

I am seeing same issue with Popper, Fade, Grow as well. Anywhere I use these components started throwing invalid hooks error. I think I will go back to previous version. it looks like 4.0.1 is not stable atm.

[eps1lon]

Closing this in favor of #15695. The underlying issue is the same: Passing the componnet prop to a material-ui component wrapped in a higher-order component.