Button Components breaks unexpectedly #12934

kumarsandeep91 · 2018-09-19T12:53:30Z

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:

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

Context

Your Environment

Tech	Version
Material-UI	v3.1.0
React	latest

The text was updated successfully, but these errors were encountered:

mbrookes · 2018-09-19T14:28:01Z

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

dunglas · 2018-10-06T15:48:29Z

@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 · 2018-10-24T09:45:26Z

Any news about this problem?

oliviertassinari · 2018-10-24T21:20:24Z

@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 · 2018-10-29T13:42:12Z

Same issue

butchmarshall · 2018-10-31T02:55:05Z

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 · 2018-11-01T06:45:48Z

@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 · 2018-11-01T10:42:57Z

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

butchmarshall · 2018-11-01T11:48:41Z

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 · 2018-11-01T13:26:12Z

@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 · 2018-11-01T15:04:48Z

@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 · 2018-11-01T16:06:38Z

@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 · 2018-11-03T10:57:09Z

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

oliviertassinari · 2018-11-04T10:33:27Z

@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 · 2019-08-20T17:54:20Z

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

kumarsandeep91 mentioned this issue Sep 19, 2018

Material UI Button Component Breaks transitive-bullshit/react-modern-library-boilerplate#21

Open

mbrookes added the status: waiting for author Issue with insufficient information label Sep 19, 2018

oliviertassinari closed this as completed Sep 20, 2018

oliviertassinari added the component: button This is the name of the generic UI component, not the React module! label Oct 24, 2018

oliviertassinari added bug 🐛 Something doesn't work external dependency Blocked by external dependency, we can’t do anything about it and removed status: waiting for author Issue with insufficient information labels Nov 1, 2018

mdsadiq mentioned this issue Nov 9, 2018

Cannot style SwipeArea component #13361

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Button Components breaks unexpectedly #12934

Button Components breaks unexpectedly #12934

kumarsandeep91 commented Sep 19, 2018 •

edited

Loading

mbrookes commented Sep 19, 2018 •

edited by oliviertassinari

Loading

dunglas commented Oct 6, 2018

lsteinberg-r7 commented Oct 24, 2018

oliviertassinari commented Oct 24, 2018

perevezencev commented Oct 29, 2018

butchmarshall commented Oct 31, 2018 •

edited

Loading

mdsadiq commented Nov 1, 2018 •

edited

Loading

oliviertassinari commented Nov 1, 2018

butchmarshall commented Nov 1, 2018 •

edited

Loading

mdsadiq commented Nov 1, 2018

oliviertassinari commented Nov 1, 2018 •

edited

Loading

eps1lon commented Nov 1, 2018 •

edited

Loading

yyyyaaa commented Nov 3, 2018

oliviertassinari commented Nov 4, 2018

NoahDavidATL commented Aug 20, 2019

Button Components breaks unexpectedly #12934

Button Components breaks unexpectedly #12934

Comments

kumarsandeep91 commented Sep 19, 2018 • edited Loading

Expected Behavior

Current Behavior

Steps to Reproduce

Context

Your Environment

mbrookes commented Sep 19, 2018 • edited by oliviertassinari Loading

dunglas commented Oct 6, 2018

lsteinberg-r7 commented Oct 24, 2018

oliviertassinari commented Oct 24, 2018

perevezencev commented Oct 29, 2018

butchmarshall commented Oct 31, 2018 • edited Loading

mdsadiq commented Nov 1, 2018 • edited Loading

oliviertassinari commented Nov 1, 2018

butchmarshall commented Nov 1, 2018 • edited Loading

mdsadiq commented Nov 1, 2018

oliviertassinari commented Nov 1, 2018 • edited Loading

eps1lon commented Nov 1, 2018 • edited Loading

yyyyaaa commented Nov 3, 2018

oliviertassinari commented Nov 4, 2018

NoahDavidATL commented Aug 20, 2019

kumarsandeep91 commented Sep 19, 2018 •

edited

Loading

mbrookes commented Sep 19, 2018 •

edited by oliviertassinari

Loading

butchmarshall commented Oct 31, 2018 •

edited

Loading

mdsadiq commented Nov 1, 2018 •

edited

Loading

butchmarshall commented Nov 1, 2018 •

edited

Loading

oliviertassinari commented Nov 1, 2018 •

edited

Loading

eps1lon commented Nov 1, 2018 •

edited

Loading