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?

[butchmarshall]

I'm heavily leaning towards this being a "two versions of react loaded" bug. I see the same error only in yarn projects which happen to put a second react dependency in the @material-ui/core/node_modules/react folder.

Deleting this folder fixes my issue.

[mdsadiq]

@oliviertassinari Not sure.
Saw this facebook/react#13652 and facebook/react#11850

May be react or should we look more into how findDOMNode(this) is used in buttonBase and portal.
At least we have two places to understand the bug.

Also its happening after building it locally, how is it not happening in production ?

[oliviertassinari]

@eps1lon It's one usage of findDOMNode(this) that we can replace with the buttonRef reference. I doubt that it will solve this issue. I think that it will just make it break somewhere else. If we are lucky, it will trigger the React duplication warning, that is much better for DX.

[eps1lon]

@oliviertassinari I think I have that change even lurking somewhere.

Edit:
master...eps1lon:next/strict-mode/ButtonBase

but it's breaking since we allow custom root components and if people pass in functional ones without forwarding (which most of them won't do) the ref won't work.

[yyyyaaa]

I'm also having this error while using npm link with a repo that uses Mui internally

[oliviertassinari]

@eps1lon We can go down this road by releasing a major version. Maybe we can open a pull request? I'm also eager to see where the discussion in facebook/react#13841 goes.

[NoahDavidATL]

Same issue: The above error occurred in the <WithStyles(ForwardRef(Button))> component...