search

reactjs / react-transition-group

An easy way to perform animations when a React component enters or leaves the DOM
https://reactcommunity.org/react-transition-group/
Other
10.14k stars 651 forks source link

Unable to find node on an unmounted component in TS CRA("react-scripts": "4.0.1",) yarn #695

Open shenqistart opened 3 years ago

shenqistart commented 3 years ago

What is the current behavior? CRA("react-scripts": "4.0.1",) yarn has problem,npm not have. react-dom.development.js:24281 Uncaught Error: Unable to find node on an unmounted component. at findHostInstanceWithWarning (react-dom.development.js:24281) at Object.findDOMNode (react-dom.development.js:24804) at Transition.performExit (Transition.js:283) at Transition.updateStatus (Transition.js:230) at Transition.componentDidUpdate (Transition.js:192) at commitLifeCycles (react-dom.development.js:20684) at commitLayoutEffects (react-dom.development.js:23426) at HTMLUnknownElement.callCallback (react-dom.development.js:3945) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994) at invokeGuardedCallback (react-dom.development.js:4056) at commitRootImpl (react-dom.development.js:23151) at unstable_runWithPriority (scheduler.development.js:646) at runWithPriority$1 (react-dom.development.js:11276) at commitRoot (react-dom.development.js:22990) at performSyncWorkOnRoot (react-dom.development.js:22329) at react-dom.development.js:11327 at unstable_runWithPriority (scheduler.development.js:646) at runWithPriority$1 (react-dom.development.js:11276) at flushSyncCallbackQueueImpl (react-dom.development.js:11322) at flushSyncCallbackQueue (react-dom.development.js:11309) at discreteUpdates$1 (react-dom.development.js:22420) at discreteUpdates (react-dom.development.js:3756) at dispatchDiscreteEvent (react-dom.development.js:5889)

What is the expected behavior?

do not has problem

Could you provide a CodeSandbox demo reproducing the bug?

mmende commented 3 years ago

I get the same error in gatsby (v2.31.1). The error appears in dev-server as soon as a CSSTransition switches its in state.

tfreeborough commented 3 years ago

Also having this same issue, tried on "react-scripts": "3.4.4"

mattstrain commented 3 years ago

So I was having this issue as well today. My stack is

Npm Monorepo using NPM Workspaces React 17 Create React App (typescript template) react-bootstrap

I was seeing this error whenever react-bootstrap tried to use any transition like for tooltips, collapse etc.

It turned out it was due to a mix up of dependencies somehow in the tree, so that might be a good place to check.

It you have done an npm i --force instead of npm i --legacy-peer-deps you'll likely have a mix up of packages or several versions of the same package running in your app at the same time.

Try to delete package-lock.json and delete your node_modules folder and do a clean install.

JavierPDev commented 3 years ago

I came across this issue and it turned out to be a mismatch of react-dom versions between my parent package and a child package it was using. Setting react-dom to identical versions in both packages fixed the issue for me.

Piliponful commented 10 months ago

@JavierPDev Thank you so much, it worked! How the hell were you able to find that it's due to mismatching versions? On my own I would never...

feljimgon1 commented 3 months ago

@JavierPDev That works for me as well! 😄 I'd like to know why that happens though 🤔