Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to find node on an unmounted components always occurs #12843

Closed
sakopqiu opened this issue Oct 26, 2018 · 13 comments
Closed

Unable to find node on an unmounted components always occurs #12843

sakopqiu opened this issue Oct 26, 2018 · 13 comments

Comments

@sakopqiu
Copy link

@sakopqiu sakopqiu commented Oct 26, 2018

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

Version

3.10.2

Environment

macos chrome 70.0.3538.67, react 16.6.0 react-dom 16.6.0

Reproduction link

https://ant.design/docs/react/introduce-cn

Steps to reproduce

We are using the <Button/> component not the <Wave/> component, but it seems the error occurs in Wave's componentDidmount method.
We switched from antd 3.8.4 to 3.9.3 to 3.10.2, but the problem still lurks

react-dom.development.js:55 Uncaught Error: Unable to find node on an unmounted component.
    at invariant (react-dom.development.js:55)
    at findCurrentFiberUsingSlowPath (react-dom.development.js:4161)
    at findCurrentHostFiber (react-dom.development.js:4269)
    at findHostInstanceWithWarning (react-dom.development.js:18296)
    at findDOMNode (react-dom.development.js:18774)
    at Wave.componentDidMount (wave.js:118)
    at commitLifeCycles (react-dom.development.js:14685)
    at commitAllLifeCycles (react-dom.development.js:15905)
    at HTMLUnknownElement.callCallback (react-dom.development.js:145)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:195)

What is expected?

This error should never happen

What is actually happening?

This error should never happen

@ant-design-bot
Copy link
Contributor

@ant-design-bot ant-design-bot commented Oct 26, 2018

Hello @sakopqiu. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @sakopqiu, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击此处创建。7 天内未跟进的 issue 将会被自动关闭。

@afc163 afc163 closed this in 087f7ef Oct 30, 2018
afc163 added a commit that referenced this issue Nov 1, 2018
* master: (27 commits)
  Fix sort order broken issue when columns were put in render
  fix Modal docs typo
  Improve Alert
  update select props :onPopupScroll
  add transform-origin on dropdown as menu
  Update validate-other.md
  should not hide avatar in vertical item layout of List
  fix stylelint again by locking version :sad:
  Fix fixed-columns Table border issue, close #9687
  site: still need the fallback scrollIntoView, #12683
  use latest stylelint
  site: fix npm run site error
  Update jsdom requirement from ^12.1.0 to ^13.0.0
  🐛 dynamic form doc fix
  Fix button icon margin style bug
  remove babel-plugin deps
  clean up useless deps
  Use recomended babel-preset-env
  findDOMNode to refs, close #12843
  componentWillReceiveProps => getDerivedStateFromProps
  ...
@kc2525
Copy link

@kc2525 kc2525 commented Nov 5, 2018

i update antd to 3.10.4 and run npm start but it still happens

@mitjade
Copy link

@mitjade mitjade commented Nov 8, 2018

I get this also on 3.10.4

@schester44
Copy link

@schester44 schester44 commented Dec 21, 2018

I'm getting this with 3.11.2, react 16.7.0-alpha.2, and react-router 4.3.1.

It usually occurs when selecting a menu item option that triggers a route change or similar.

The error is triggered inside of rc-menu's componentDidUpdate.

@zlv-thisF
Copy link

@zlv-thisF zlv-thisF commented Dec 26, 2018

same issue here;

what troubles me is:
i use react-router's nest Route -- Switch nest Switch
and Menu from antd;

if i don not use React.Lazy ,all works perfectly, however if i add React.lazy, when click menuItem to navigate route , page collapse, show ' Unable to find node on an unmounted ', but if i change inner Switch from React.Lazy to normal, no error any more..

is there any thing i missed , i dont even know its's a antd's bug or react-router's or react's

besides , ' Unable to find node on an unmounted ' show somethings related to rc-trigger, may be i use UI i . a wrong way?

@ztplz
Copy link
Contributor

@ztplz ztplz commented Dec 26, 2018

Could you provide a sample online demo or github repository?

@zlv-thisF
Copy link

@zlv-thisF zlv-thisF commented Dec 26, 2018

https://codesandbox.io/s/xorrkwry7w @ztplz

in /test/first click menuItem . (first or second ) then page collpase.

thx for help!

@ztplz
Copy link
Contributor

@ztplz ztplz commented Dec 26, 2018

@zlv-thisF Can you tell me how to reproduce this bug?
image

@schester44
Copy link

@schester44 schester44 commented Dec 26, 2018

@ztplz He has his routes backwards in that example. Switch the routes in the App component to be

   <Switch>
              <Route path="/test" exact render={() => <div>123</div>} />
              <Route apth="/" component={Parent} />
            </Switch>

then click on one of the menu items.

@schester44
Copy link

@schester44 schester44 commented Dec 26, 2018

It only occurs when the Menu component is nested inside of a Suspense component.

@ztplz
Copy link
Contributor

@ztplz ztplz commented Dec 26, 2018

@schester44
Copy link

@schester44 schester44 commented Dec 26, 2018

ahh, so the issue is actually using the Route's component prop instead of the render prop when rendering "lazy loaded" components. That does fix the error that the Menu component was throwing. thanks!

@zlv-thisF
Copy link

@zlv-thisF zlv-thisF commented Dec 27, 2018

Thx a lot! @schester44 @ztplz, it does work!

in my project, nested routes is a bit more complicated , nested deep inner Switch still throw error as above mentioned, now i have changed React.suspense wrap all routes to something like:

image

image

now all work as expected in my project;

its high time i read the source code of React.Suspense and React.lazy !!!!!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants