SwipeableDrawer has error when use with React.Lazy ( React Ver 16.8.6 )

[quangthienit1994]

I has problem on click event a child component of SwipeableDrawer.
"Uncaught Invariant Violation: Unable to find node on an unmounted component." with React.Suspense and React.Lazy

Uncaught Invariant Violation: Unable to find node on an unmounted component.
at invariant (http://localhost:3000/static/js/0.chunk.js:333456:19)
at findCurrentFiberUsingSlowPath (http://localhost:3000/static/js/0.chunk.js:337794:31)
at findCurrentHostFiber (http://localhost:3000/static/js/0.chunk.js:337806:27)
at findHostInstanceWithWarning (http://localhost:3000/static/js/0.chunk.js:355026:25)
at Object.findDOMNode (http://localhost:3000/static/js/0.chunk.js:355578:18)
at RootRef.componentDidUpdate (http://localhost:3000/static/js/0.chunk.js:99478:35)
at RootRef.componentDidUpdate (http://localhost:3000/static/js/0.chunk.js:358723:123)
at commitLifeCycles (http://localhost:3000/static/js/0.chunk.js:351485:26)
at commitAllLifeCycles (http://localhost:3000/static/js/0.chunk.js:353029:11)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:333546:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:333595:20)
at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:333649:35)
at commitRoot (http://localhost:3000/static/js/0.chunk.js:353253:11)
at http://localhost:3000/static/js/0.chunk.js:354801:9
at Object.unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:366158:16)
at completeRoot (http://localhost:3000/static/js/0.chunk.js:354800:17)
at performWorkOnRoot (http://localhost:3000/static/js/0.chunk.js:354723:13)
at performWork (http://localhost:3000/static/js/0.chunk.js:354628:11)
at performSyncWork (http://localhost:3000/static/js/0.chunk.js:354602:7)
at interactiveUpdates$1 (http://localhost:3000/static/js/0.chunk.js:354887:11)
at interactiveUpdates (http://localhost:3000/static/js/0.chunk.js:335667:14)
at dispatchInteractiveEvent (http://localhost:3000/static/js/0.chunk.js:338485:7)

The above error occurred in the 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 Drawer)
in Drawer (created by WithStyles(Drawer))
in WithStyles(Drawer) (created by SwipeableDrawer)
in SwipeableDrawer (created by WithTheme(SwipeableDrawer))
in WithTheme(SwipeableDrawer) (at MenuHorizontal/index.tsx:23)
in MenuHorizontal (created by I18nextWithTranslation)
in I18nextWithTranslation (created by WithStyles(I18nextWithTranslation))
in WithStyles(I18nextWithTranslation)
in Connect(WithStyles(I18nextWithTranslation)) (at PrimaryMenu/index.tsx:44)
in PrimaryMenu (created by I18nextWithTranslation)
in I18nextWithTranslation
in Connect(I18nextWithTranslation) (created by HotExportedConnect(I18nextWithTranslation))
in AppContainer (created by HotExportedConnect(I18nextWithTranslation))
in HotExportedConnect(I18nextWithTranslation) (at App.tsx:31)
in Defaults (created by I18nextWithTranslation)
in I18nextWithTranslation
in Connect(I18nextWithTranslation) (at App.tsx:30)
in Routes
in Connect(Routes) (created by HotExportedConnect(Routes))
in AppContainer (created by HotExportedConnect(Routes))
in HotExportedConnect(Routes) (at src/index.tsx:42)
in Router
in BrowserRouter (at src/index.tsx:41)
in Suspense (at src/index.tsx:33)
in MuiThemeProviderOld (at src/index.tsx:32)
in Provider (at src/index.tsx:31)
in I18nextProvider
in AppContainer (at src/index.tsx:29)

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

Component With Error:

`class MenuHorizontal extends React.Component<IProps, {}> {

render() {
    const { classes } = this.props;
    return (
        <SwipeableDrawer anchor="left" open={this.props.open} onClose={this.props.onClose} onOpen={this.props.onOpen}>
            <List onClick={this.props.onClose} component={"nav"} className={classes.list}>
                { this.getMenuItem(top) }
            </List>
            <List onClick={this.props.onClose} component={"nav"} className={classes.list + " mt-auto pb-0"}>
                <Divider />
                { this.getMenuItem(bottom) }
            </List>
        </SwipeableDrawer>
    );
}
getMenuItem(data: INavMenu[]){
    return data.map((node: INavMenu) => {
        if(node.isShow && !node.isShow(this.props)){
            return null;
        }
        return <NavItem key={node.to} {...node} />
    })
}

}`

The errror removed when i remove "onClick" event on ( Or all child component ) child component. Error will exists when event has connect with state open of SwipeableDrawer

[eps1lon]

Could you include where Suspense and lazy is used? A codesandbox would be ideal. This codesandbox.io template may be a good starting point. Thank you!

[Obbi89]

@eps1lon @oliviertassinari Is this issue fixed?

If not I just built this Sandbox.
The error has to be triggered in a certain way and it might not trigger every time.

1. Hover over the Material-UI title until the tooltip appears.
2. Quickly click on the button to load the dialog.

It seems to be a race condition with (timers?) i guess.
You need to inspect the iframe to get the real exception, cause i wasn't able to quickly fix the cross origin error.

Hope that helps.

https://codesandbox.io/s/54p08z2llx

[oliviertassinari]

@Obbi89 Could it be a React issue?