[BUG] Incompatible with React 19
mattgperry opened this issue · comments
Framer Motion is incompatible with React 19.
Framer itself runs on React 18 and given the scope of breaking changes (subtle and major) I think it is unlikely to be upgraded in the near-term.
To support 19, we preferably have to fix types and animations in a way that is backwards compatible with 18.
Types: #2640
Animations: #2624
Please add further examples of broken behaviour in the comments here.
Interestingly, everything does work after building, but not in dev mode (using Vite)
Isn't it in dev mode that React now double renders as well as runs double effects?
Isn't it in dev mode that React now double renders as well as runs double effects?
From the upgrade guide, for clarity's sake:
When double rendering in Strict Mode in development, useMemo and useCallback will reuse the memoized results from the first render during the second render. Components that are already Strict Mode compatible should not notice a difference in behavior.
[...] during development, Strict Mode will double-invoke ref callback functions on initial mount, to simulate what happens when a mounted component is replaced by a Suspense fallback.
I have found that almost all animations break in react 19 with strict mode on. Initial state will be stuck forever and exit animations just instantly snap to the last state.
Turning off strict mode fixes all of these issues as far as I know. This is, ofcourse, inadvisable.
Understand that from the PR this is not a priority and I've been able to work around this issue happily ^ Encountered this during a test upgrade of NextJS which is likely going to force React 19 upon it's users from 14.3.0+ (it currently throws an error at startup and asks you to upgrade to React 19.0.0 >=), so you may see more issues being raised around this particular snafu.
Just thought I'd throw it out there before the deluge of issues comes in 😂
Just found this issue after searching for a while why the animations of https://github.com/Temzasse/react-modal-sheet wouldn't work in dev mode, but would in production mode. Very surprising, thanks !
Track React 19 progress here: #2667
Current compatible version is framer-motion@12.0.0-alpha.0