SwipeableDrawer has error when use with React.Lazy ( React Ver 16.8.6 ) #15136
Description
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