search

framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
22.73k stars 755 forks source link

[BUG] Incompatible with React 19 #2668

Open mattgperry opened 1 month ago

mattgperry commented 1 month ago

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: https://github.com/framer/motion/issues/2640 Animations: https://github.com/framer/motion/issues/2624

Please add further examples of broken behaviour in the comments here.

rubensmit93 commented 1 month ago

Interestingly, everything does work after building, but not in dev mode (using Vite)

mattgperry commented 1 month ago

Isn't it in dev mode that React now double renders as well as runs double effects?

bryanveloso commented 1 month ago

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.

wouter173 commented 1 month ago

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.

pixel-toys-chris-evans commented 1 month ago

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 😂

laem commented 3 weeks ago

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 !

mattgperry commented 3 weeks ago

Track React 19 progress here: https://github.com/framer/motion/pull/2667

Current compatible version is framer-motion@12.0.0-alpha.0