Uncaught Invariant Violation: Unable to find node on an unmounted component.

[nimahkh]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?

technologies
react router dom
material-ui
hooks and functional components
context API and providers

when i want to navigate between routes , i get this error :

at invariant (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:57:19)
    at findCurrentFiberUsingSlowPath (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4395:31)
    at findCurrentHostFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4407:27)
    at findHostInstanceWithWarning (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21472:25)
    at Object.findDOMNode (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22024:18)
    at ref (webpack-internal:///./node_modules/@material-ui/core/Slide/Slide.js:255:52)
    at commitAttachRef (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:18104:11)
    at commitAllLifeCycles (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19480:11)
    at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:147:18)
    at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:196:20)
    at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:250:35)
    at commitRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19699:11)
    at eval (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21247:9)
    at Object.unstable_runWithPriority (webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:255:16)
    at completeRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21246:17)
    at performWorkOnRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21169:13)
    at performWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21074:11)
    at performSyncWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21048:7)
    at interactiveUpdates$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21333:11)
    at interactiveUpdates (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:2268:14)
    at dispatchInteractiveEvent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:5086:7)

after this error , i get this error block ( but it is different , because some times i click on Menu component and some times i am in a Drawer ) .

The above error occurred in the <Transition> component:
    in Transition (created by Slide)
    in EventListener (created by Slide)
    in Slide (created by WithTheme(Slide))
    in WithTheme(Slide) (created by Drawer)
    in div (created by Drawer)
    in Drawer (created by WithStyles(Drawer))
    in WithStyles(Drawer) (at AppBar/index.js:524)
    in div (at AppBar/index.js:457)
    in Index (created by WithStyles(Index))
    in WithStyles(Index) (at App.js:98)
    in BalanceStateProvider (at App.js:96)
    in LoginStateProvider (at App.js:95)
    in DrawerStateProvider (at App.js:94)
    in Suspense (at App.js:93)
    in MuiThemeProviderOld (at App.js:92)
    in Router (at App.js:91)
    in App (at src/index.js:31)
    in StateProvider (at src/index.js:30)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:29)

when i write the code in sandbox , everything works fine , but in my project , is not .
even i dont know where i have to check for this error , because i have no findDomNode function .

what i did for this

• remove all contexts
• remove material-ui provider
• remove Suspense and lazy

but nothing change

[nimahkh]

solved

it was because of lazy and suspense . i dont know why , but when i remove suspense and load components normal , it solved

[nimahkh]

i change my routers like this , and everything is perfect now

import React, { lazy, Suspense } from "react";
import ReactDOM from "react-dom";
import { MemoryRouter as Router, Route, Switch } from "react-router-dom";

import Home from "./home";
const Post = lazy(() => import("./post"));

function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/:id" component={WaitingComponent(Post)} />
        </Switch>
      </div>
    </Router>
  );
}

function WaitingComponent(Component) {
  return props => (
    <Suspense fallback={<div>Loading...</div>}>
      <Component {...props} />
    </Suspense>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[eps1lon]

This is likely a duplicate of #14188 which is fixed on master but not released yet.

[lucianvaduva]

Having this error on "react": "^16.10.2", after updating from 16.5. Any advice please?