Button Components breaks unexpectedly

[kumarsandeep91]

Button and ButtonBase Components breaks unexpectedly

• 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

Button component should render normally

Current Behavior

`Uncaught Error: Unable to find node on an unmounted component.
at invariant (invariant.js:42)
at findCurrentFiberUsingSlowPath (react-dom.development.js:3779)
at findCurrentHostFiber (react-dom.development.js:3887)
at findHostInstance (react-dom.development.js:16825)
at Object.findDOMNode (react-dom.development.js:17311)
at ButtonBase.componentDidMount (ButtonBase.js:250)
at commitLifeCycles (react-dom.development.js:14685)
at commitAllLifeCycles (react-dom.development.js:15905)
at HTMLUnknownElement.callCallback (react-dom.development.js:145)
at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
at invokeGuardedCallback (react-dom.development.js:248)
at commitRoot (react-dom.development.js:16075)
at completeRoot (react-dom.development.js:17463)
at performWorkOnRoot (react-dom.development.js:17391)
at performWork (react-dom.development.js:17295)
at performSyncWork (react-dom.development.js:17267)
at requestWork (react-dom.development.js:17155)
at scheduleWork (react-dom.development.js:16949)
at scheduleRootUpdate (react-dom.development.js:17637)
at updateContainerAtExpirationTime (react-dom.development.js:17664)
at updateContainer (react-dom.development.js:17691)
at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17957)
at react-dom.development.js:18097
at unbatchedUpdates (react-dom.development.js:17518)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:18093)
at Object.render (react-dom.development.js:18152)
at Object../src/index.js (index.js:28)
at webpack_require (bootstrap d2b7cb24b090fab060e3:678)
at fn (bootstrap d2b7cb24b090fab060e3:88)
at Object.0 (index.js:29)
at webpack_require (bootstrap d2b7cb24b090fab060e3:678)
at bootstrap d2b7cb24b090fab060e3:724
at bootstrap d2b7cb24b090fab060e3:724
invariant @ invariant.js:42
findCurrentFiberUsingSlowPath @ react-dom.development.js:3779
findCurrentHostFiber @ react-dom.development.js:3887
findHostInstance @ react-dom.development.js:16825
findDOMNode @ react-dom.development.js:17311
componentDidMount @ ButtonBase.js:250
commitLifeCycles @ react-dom.development.js:14685
commitAllLifeCycles @ react-dom.development.js:15905
callCallback @ react-dom.development.js:145
invokeGuardedCallbackDev @ react-dom.development.js:195
invokeGuardedCallback @ react-dom.development.js:248
commitRoot @ react-dom.development.js:16075
completeRoot @ react-dom.development.js:17463
performWorkOnRoot @ react-dom.development.js:17391
performWork @ react-dom.development.js:17295
performSyncWork @ react-dom.development.js:17267
requestWork @ react-dom.development.js:17155
scheduleWork @ react-dom.development.js:16949
scheduleRootUpdate @ react-dom.development.js:17637
updateContainerAtExpirationTime @ react-dom.development.js:17664
updateContainer @ react-dom.development.js:17691
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17957
(anonymous) @ react-dom.development.js:18097
unbatchedUpdates @ react-dom.development.js:17518
legacyRenderSubtreeIntoContainer @ react-dom.development.js:18093
render @ react-dom.development.js:18152
./src/index.js @ index.js:28
webpack_require @ bootstrap d2b7cb24b090fab060e3:678
fn @ bootstrap d2b7cb24b090fab060e3:88
0 @ index.js:29
webpack_require @ bootstrap d2b7cb24b090fab060e3:678
(anonymous) @ bootstrap d2b7cb24b090fab060e3:724
(anonymous) @ bootstrap d2b7cb24b090fab060e3:724
index.js:2178 The above error occurred in the component:
in ButtonBase
in WithStyles(ButtonBase)
in Button
in WithStyles(Button)
in div
in Grid
in WithStyles(Grid)
in div
in Grid
in WithStyles(Grid)
in div
in Grid
in WithStyles(Grid)
in div
in Grid
in WithStyles(Grid)
in ListingDetail
in WithStyles(ListingDetail) (at App.js:9)
in div (at App.js:8)
in App (at src/index.js:30)
in MuiThemeProvider (at src/index.js:29)

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.
stack_frame_overlay_proxy_console @ index.js:2178
logCapturedError @ react-dom.development.js:14550
logError @ react-dom.development.js:14586
update.callback @ react-dom.development.js:15273
callCallback @ react-dom.development.js:11133
commitUpdateEffects @ react-dom.development.js:11172
commitUpdateQueue @ react-dom.development.js:11160
commitLifeCycles @ react-dom.development.js:14721
commitAllLifeCycles @ react-dom.development.js:15905
callCallback @ react-dom.development.js:145
invokeGuardedCallbackDev @ react-dom.development.js:195
invokeGuardedCallback @ react-dom.development.js:248
commitRoot @ react-dom.development.js:16075
completeRoot @ react-dom.development.js:17463
performWorkOnRoot @ react-dom.development.js:17391
performWork @ react-dom.development.js:17295
performSyncWork @ react-dom.development.js:17267
requestWork @ react-dom.development.js:17155
scheduleWork @ react-dom.development.js:16949
scheduleRootUpdate @ react-dom.development.js:17637
updateContainerAtExpirationTime @ react-dom.development.js:17664
updateContainer @ react-dom.development.js:17691
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17957
(anonymous) @ react-dom.development.js:18097
unbatchedUpdates @ react-dom.development.js:17518
legacyRenderSubtreeIntoContainer @ react-dom.development.js:18093
render @ react-dom.development.js:18152
./src/index.js @ index.js:28
webpack_require @ bootstrap d2b7cb24b090fab060e3:678
fn @ bootstrap d2b7cb24b090fab060e3:88
0 @ index.js:29
webpack_require @ bootstrap d2b7cb24b090fab060e3:678
(anonymous) @ bootstrap d2b7cb24b090fab060e3:724
(anonymous) @ bootstrap d2b7cb24b090fab060e3:724
invariant.js:42 Uncaught Error: Unable to find node on an unmounted component.
at invariant (invariant.js:42)
at findCurrentFiberUsingSlowPath (react-dom.development.js:3779)
at findCurrentHostFiber (react-dom.development.js:3887)
at findHostInstance (react-dom.development.js:16825)
at Object.findDOMNode (react-dom.development.js:17311)
at ButtonBase.componentDidMount (ButtonBase.js:250)
at commitLifeCycles (react-dom.development.js:14685)
at commitAllLifeCycles (react-dom.development.js:15905)
at HTMLUnknownElement.callCallback (react-dom.development.js:145)
at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
at invokeGuardedCallback (react-dom.development.js:248)
at commitRoot (react-dom.development.js:16075)
at completeRoot (react-dom.development.js:17463)
at performWorkOnRoot (react-dom.development.js:17391)
at performWork (react-dom.development.js:17295)
at performSyncWork (react-dom.development.js:17267)
at requestWork (react-dom.development.js:17155)
at scheduleWork (react-dom.development.js:16949)
at scheduleRootUpdate (react-dom.development.js:17637)
at updateContainerAtExpirationTime (react-dom.development.js:17664)
at updateContainer (react-dom.development.js:17691)
at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17957)
at react-dom.development.js:18097
at unbatchedUpdates (react-dom.development.js:17518)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:18093)
at Object.render (react-dom.development.js:18152)
at Object../src/index.js (index.js:28)
at webpack_require (bootstrap d2b7cb24b090fab060e3:678)
at fn (bootstrap d2b7cb24b090fab060e3:88)
at Object.0 (index.js:29)
at webpack_require (bootstrap d2b7cb24b090fab060e3:678)
at bootstrap d2b7cb24b090fab060e3:724
at bootstrap d2b7cb24b090fab060e3:724`

Steps to Reproduce

Link:

1. git clone https://github.com/kumarsandeep91/renthobo
2. cd renthobo
3. npm start
   Then in new tab
4. cd example && npm start

Context

Your Environment

Tech	Version
Material-UI	v3.1.0
React	latest

[mbrookes]

Sorry, but your example app doesn't reproduce the issue. Perhaps you could submit a codesandbox?

[dunglas]

@kumarsandeep91 I'm having the exact same problem using a basic install of API Platform Admin (that depends of React Admin and Material UI) and the latest version of React. Did you find a solution?

[lsteinberg-r7]

Any news about this problem?

[oliviertassinari]

@liavst2 This issue has been closed because it does not conform to our issue requirements.
We need a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[perevezencev]

Same issue

[butchmarshall]

Same issue.

The component I'm building works inside storybook and works when mounted inside other projects.

I then mounted it inside a react-rails application and get the error at:

  componentDidMount() {
    this.button = ReactDOM.findDOMNode(this);

I've created a distribution library MyLibrary using rollup.

When installed into my react-rails app (ProjectA), MyLibrary seems to install it's own version of material-ui under node_modules/my_library/node_modules/@material-ui/core/.... Whenever a <Radio /> component is used inside it's calling that secondary version of material-ui.

When I use directly on an import, it uses the node_modules/@material-ui/core/... and it works as expected.

Basically... somehow... two versions of @material-ui being used.

However, in my other project (ProjectB), node_modules/my_library/node_modules/@material-ui/core does not get installed and everything works as expected.

If I rm -Rf node_modules/my_library/node_modules/* in ProjectA, everything works fine.

I believe my_library/node_modules/react was loading as a second copy of React and using that instead of the version being mounted.

[mdsadiq]

@mbrookes @oliviertassinari

Steps to Reproduce

1, yarn link in packages/material-ui/build folder

2, yarn build in packages/material-ui folder

3, Download the sandbox code

4, yarn link "@material-ui/core" from root folder of sandbox code

5, yarn install and npm run start from root folder of sandbox code

You can see the error Unable to find node on an unmounted component. in buttonBase

PS: Comment out the Button and use div to open the drawer, you can see the error again.

[oliviertassinari]

@mdsadiq I can reproduce. Could it be a react or create-react-app bug?