Material-ui: RootRef Error on Menu on routing with react-router-dom

[DanilloCorvalan]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Not to throw error.

Current Behavior 😯

In codesandbox we can't get the full error details, but locally it's the stack-trace:

Uncaught Error: Unable to find node on an unmounted component.
    at invariant (react-dom.development.js:57)
    at findCurrentFiberUsingSlowPath (react-dom.development.js:4382)
    at findCurrentHostFiber (react-dom.development.js:4394)
    at findHostInstanceWithWarning (react-dom.development.js:20467)
    at Object.findDOMNode (react-dom.development.js:21021)
    at RootRef.componentDidUpdate (RootRef.js:80)
    at commitLifeCycles (react-dom.development.js:17000)
    at commitAllLifeCycles (react-dom.development.js:18503)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitRoot (react-dom.development.js:18708)
    at completeRoot (react-dom.development.js:20238)
    at performWorkOnRoot (react-dom.development.js:20161)
    at performWork (react-dom.development.js:20066)
    at performSyncWork (react-dom.development.js:20040)
    at interactiveUpdates$1 (react-dom.development.js:20328)
    at interactiveUpdates (react-dom.development.js:2267)
    at dispatchInteractiveEvent (react-dom.development.js:5073)
invariant @ react-dom.development.js:57
findCurrentFiberUsingSlowPath @ react-dom.development.js:4382
findCurrentHostFiber @ react-dom.development.js:4394
findHostInstanceWithWarning @ react-dom.development.js:20467
findDOMNode @ react-dom.development.js:21021
componentDidUpdate @ RootRef.js:80
commitLifeCycles @ react-dom.development.js:17000
commitAllLifeCycles @ react-dom.development.js:18503
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18708
completeRoot @ react-dom.development.js:20238
performWorkOnRoot @ react-dom.development.js:20161
performWork @ react-dom.development.js:20066
performSyncWork @ react-dom.development.js:20040
interactiveUpdates$1 @ react-dom.development.js:20328
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5073
index.js:1446 The above error occurred in the <RootRef> component:
    in RootRef (created by Modal)
    in div (created by Modal)
    in Portal (created by Modal)
    in Modal (created by WithStyles(Modal))
    in WithStyles(Modal) (created by Popover)
    in Popover (created by WithStyles(Popover))
    in WithStyles(Popover) (created by Menu)
    in Menu (created by WithStyles(Menu))
    in WithStyles(Menu) (at application-header.jsx:47)
    in header (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by AppBar)
    in AppBar (created by WithStyles(AppBar))
    in WithStyles(AppBar) (at application-header.jsx:39)
    in ApplicationHeader (created by Context.Consumer)
    in Route (created by withRouter(ApplicationHeader))
    in withRouter(ApplicationHeader) (at App.jsx:79)
    in Suspense (at App.jsx:78)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.jsx:77)
    in CheckUser (created by Context.Consumer)
    in Connect(CheckUser) (at App.jsx:76)
    in IntlProvider (at App.jsx:75)
    in Provider (at App.jsx:74)
    in ErrorPage (at App.jsx:72)
    in App (at src/index.js:7)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorPage.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/62y9n1xw7w

1. Click on the AppBar icon button
2. Try navigate to a different page you are in
3. The error is thrown

Context 🔦

I'm trying to use Material-UI together with react-router-dom but can't make the simplest thing that is navigate to other routes to work.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.9.1 |
| React | 16.7.0 |
| React Router | 4.3.1 |

[oliviertassinari]

@DanilloCorvalan This looks like an error with React itself. We are calling ReactDOM.findDOMNode(this) in componentDidUpdate(). There is nothing fundamentally wrong with it. I have managed to simplify a bit the reproduction, but I think that it needs more work before we can send it to React: https://codesandbox.io/s/2om2v1zlz0.

Can you move the AppBar outside the Suspense component?

[DanilloCorvalan]

@oliviertassinari your suggestion worked really well. Thanks for the fast response!

[jcperez-ch]

I have tried the code sandbox you posted @DanilloCorvalan and I see you use

<Route exact path="/" component={props => <Index {...props} />} />

when you actually need

<Route exact path="/" render={props => <Index {...props} />} />

Lazy components won't work using the component render, you either need to render them as children or with render prop. Not sure if the issue is going in that direction.

[jcperez-ch]

I tried @oliviertassinari codesandbox and removed the actual RootRef and it worked... so we can see the issue is still present in RootRef
https://codesandbox.io/s/k2kojyy74r

[oliviertassinari]

@jcperez-ch So, are we good? We will try to deprecate RootRef in v4.1.0.

[pheolink]

Guys even I am facing the same issue. the issue is happening in the tool tip and Dialog component. Is there any solution found....? or
else do we have to wait till v4.1.0