Uncaught Invariant Violation: Unable to find node on an unmounted component error occurred in the <Transition> component

[nimahkh]

i have a Drawer with default open props. when i do props.history.push('/login') , get this error

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

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:522)
    in div (at AppBar/index.js:455)
    in Index (created by WithStyles(Index))
    in WithStyles(Index) (at App.js:98)
    in Router (at App.js:95)
    in Suspense (at App.js:94)
    in MuiThemeProviderOld (at App.js:93)
    in BalanceStateProvider (at App.js:92)
    in LoginStateProvider (at App.js:91)
    in DrawerStateProvider (at App.js:90)
    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)

• I have searched the issues of this repository and believe that this is not a duplicate.

Tech	Version
Material-UI	v3.?.?
React	16.8
Browser	chrome

[eps1lon]

This may be caused by reactjs/react-transition-group#469

We're in the process of setting up a fork that works without findDOMNode. Hopefully this resovles those issues.

[nimahkh]

This may be caused by reactjs/react-transition-group#469

We're in the process of setting up a fork that works without findDOMNode. Hopefully this resovles those issues.

i think this bug is from functional components , i use functions and before that , i have no errors

[eps1lon]

Out of curiosity: Do you even use transition handlers e.g. onExited and use the node argument?

[nimahkh]

Out of curiosity: Do you even use transition handlers e.g. onExited and use the node argument?

it is my Drawer

...
const [open,setOpen]=useState(true);
...
<Drawer
                className={classes.drawer}
                variant="persistent"
                anchor="left"
                open={open}
                classes={{
                    paperAnchorDockedLeft: classes.paperAnchorDockedLeft,
                    paper: classes.drawerPaper,
                }}
            >
                <div className={classes.drawerHeader}>
                    <IconButton
                        disableRipple={true}
                        disabled={true}
                        onClick={handleDrawerClose}>
                        <MenuIcon/>
                    </IconButton>
                </div>

                <List>
                    {MenueList.map((item, index) => (
                        <ListItem
                            onClick={() => {
                                props.history.push(item.route)
                                whatIsRoute()
                            }}
                            classes={{
                                root: classes.listItemRoot
                            }}
                            key={index}>
                            <ListItemIcon
                                classes={{
                                    root: classes.listItemIconRoot
                                }}
                            >
                                {item.route === currentRoute ? item.iconActive : item.icon}
                            </ListItemIcon>
                            <span
                                className={classes.menuTexts}
                            >
                                <Typography
                                    classes={{
                                        root: classes.typographyText
                                    }}
                                    variant={"body1"}
                                    noWrap
                                    gutterBottom
                                    align={'center'}>
                                    {item.name}
                                </Typography>
                                </span>
                        </ListItem>
                    ))}
                </List>

            </Drawer>

[eps1lon]

Out of curiosity: Do you even use transition handlers e.g. onExited and use the node argument?

it is my Drawer

You could've also passed your own onExited handlers which is why I asked. Just want to collect some data points if people actually use those.

[oliviertassinari]

@nimahkh By any chance, can you provide a minimal reproduction example?

[nimahkh]

Out of curiosity: Do you even use transition handlers e.g. onExited and use the node argument?

it is my Drawer

You could've also passed your own onExited handlers which is why I asked. Just want to collect some data points if people actually use those.

onExited is about Menu or Transition components , the problem is Drawer , so onExited and another Exit Props , will not work on it , as you can see in my code above , i have no Menu Component, some times i have this problem and some times , every thing is ok

[oliviertassinari]

@nimahkh Could you provide a minimal reproduction? We won't be able to help more otherwise.

[nimahkh]

@nimahkh Could you provide a minimal reproduction? We won't be able to help more otherwise.

i was writing in codesandbox and then it crash and throw me out . but something is interesting , my code works on sandbox , i dont know what is going on

[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 was likely fixed in react on master but not release yet (facebook/react#15312). In any case it's an issue with an external dependency that we will fix regardless in #16283

[fasikaWalle]

I just use material ui Menu from another package and got same issue , it strange but installing latest (similar to the spa version) react-dom solve the issue.