React 19 #2667

mattgperry · 2024-05-16T08:09:25Z

This PR upgrades React to v19.

Current release: 12.0.0-alpha.1

Because Framer will be on React 18 perhaps for a while, the current plan is to keep this PR open, release as 12.0.0, keep main for 11.x releases and rebase them into 12.x for the time being.

TODO

eps1lon · 2024-05-22T08:22:09Z

For types, I'd recommend starting with npx types-react-codemod preset-19 ~/path-to-framer-motion-typescript-files. DefinitelyTyped/DefinitelyTyped#69022 has the full changelog.

eps1lon · 2024-05-22T10:45:52Z

yarn.lock

@@ -3703,6 +3712,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/react@npm:types-react@beta":


You should use resolutions to enforce a single version of @types/react and @types/react-dom as suggested in the upgrade guide

Multiple versions of @types/react is not supported just like multiple versions of react are not supported.

mattgperry · 2024-05-22T12:38:11Z

@eps1lon I did try that but it didn't make any changes. Luckily I think I'm making headway with the types now.

eps1lon · 2024-05-22T13:45:48Z

@eps1lon I did try that but it didn't make any changes.

I just tried it in a fresh clone and it made changes to 25 files:

$ npx types-react-codemod@latest preset-19 .
Processing 779 files... 
Spawning 10 workers...
Results: 
0 errors
753 unmodified
1 skipped
25 ok
Time elapsed: 6.403seconds

mattgperry · 2024-05-23T03:38:59Z

@eps1lon I did try that but it didn't make any changes.

I just tried it in a fresh clone and it made changes to 25 files:
$ npx types-react-codemod@latest preset-19 .
Processing 779 files... 
Spawning 10 workers...
Results: 
0 errors
753 unmodified
1 skipped
25 ok
Time elapsed: 6.403seconds 

Ah interesting, I must have done it wrong. I’ll give it another shot, thanks.

izakfilmalter · 2024-06-07T14:39:04Z

So hype for this.

steve-marmalade · 2024-06-13T17:18:13Z

Thanks for pushing on this. I'm very happy to report that framer-motion@12.0.0-alpha.0 is working well in my project running the latest NextJS canary and the latest react-19 RC.

steve-marmalade · 2024-06-18T22:15:46Z

Hi @mattgperry , just curious, does:

Merge in Upgrade React Three Fiber 9 #2699 and restore 3d tests to CI

mean that you've already made significant progress on Framer Motion 3d compatibility with React 19?

I ask because I remember seeing the following warning in the docs, so it was a pleasant surprise.

Warning: Framer Motion 3D is only compatible with React 18, with no timeline for React 19 compatibility.

mattgperry · 2024-07-10T14:20:57Z

@steve-marmalade Yeah I think 3D should be working now but that will rely on the deps defined in the package.json. Due to its low usage if it takes too much time to upgrade it could be that we have to leave it for a while but luckily doesn't seem to be the case for now.

krachtstefan · 2024-07-12T16:42:25Z

Thanks for pushing on this. I'm very happy to report that framer-motion@12.0.0-alpha.0 is working well in my project running the latest NextJS canary and the latest react-19 RC.

@steve-marmalade I'm also the latest NextJS canary (15.0.0-rc.0) but have some TypeScript problems. Did you change anything else after switching to framer-motion@12.0.0-alpha.0? The API did not change, right? My animation works but TypeScript complains with:

JSX element type 'motion.div' does not have any construct or call signatures.

and

'motion.div' cannot be used as a JSX component.
  Its type 'ForwardRefComponent<HTMLElementType, HTMLMotionProps<HTMLElementType>> | undefined' is not a valid JSX element type.
    Type 'undefined' is not assignable to type 'ElementType'.

I basically just use a very basic <motion.div ...

Apezdr · 2024-07-15T07:24:42Z

Getting a weird bug where the opacity isn't transitioning when I refresh the page (but fixes itself if I hard refresh shift-refresh). Using NextJS. Not sure how to solve for it because this issue was introduced in upgrading the packages below. I am using framer motion in my template for the route, also using the /src directory with a master layout.js that doesn't use any framer motion in it.

"next": "^15.0.0-rc.0",
"react": "^19.0.0-rc-df5f2736-20240712",
"react-dom": "^19.0.0-rc-df5f2736-20240712",
"framer-motion": "^12.0.0-alpha.0",

// src\app\template.js
'use client'
import { motion } from 'framer-motion'

const variants = {
  hidden: { opacity: 0, x: 0, y: 0 },
  enter: { opacity: 1, x: 0, y: 0 },
}

export default function Template({ children }) {
  return (
    <motion.main
      variants={variants}
      initial="hidden"
      exit="hidden"
      animate="enter"
      transition={{ type: 'linear', duration: 0.25 }}
      key="LandingPage"
    >
      {children}
    </motion.main>
  )
}

lucascurti · 2024-07-26T15:50:57Z

Getting a weird bug where the opacity isn't transitioning when I refresh the page (but fixes itself if I hard refresh shift-refresh). Using NextJS. Not sure how to solve for it because this issue was introduced in upgrading the packages below. I am using framer motion in my template for the route, also using the /src directory with a master layout.js that doesn't use any framer motion in it.

@Apezdr I'm getting the same behavior. This PR that might address the issue was just merged (more info here). It will hopefully be fixed once these changes are merged in the v12 alpha version.

tyteen4a03 · 2024-08-31T18:54:53Z

Any chance we can get a alpha-1 backporting fixes since alpha-0 release?

mattgperry · 2024-09-04T14:39:26Z

@tyteen4a03 You can upgrade to 12.0.0-alpha.1 now, this contains all the latest releases!

bdrtsky · 2024-10-11T12:16:52Z

useAnimationControls is not working in Framer Motion 12?

mattgperry · 2024-11-22T10:39:22Z

Btw I'm attempting to upgrade to RC1 now. Not the smoothest process 😅 but hopefully new alpha today or Tuesday.

Fixing dep React 19 Upgrade React 19 Upgrading React 19 fixing gitignore Updating import Fixing 3D types Fixing conflict Fixing conflicts Fixing willChange v12.0.0-alpha.1 Updating to latest RC Latest Fixing test

trevorblades · 2024-12-06T08:10:22Z

packages/framer-motion/src/render/dom/scroll/index.ts

@@ -86,6 +86,7 @@ function needsElementTracking(options?: ScrollOptions) {

 function scrollFunction(onScroll: OnScroll, options: ScrollOptions) {
    if (isOnScrollWithInfo(onScroll) || needsElementTracking(options)) {
+        console.log(isOnScrollWithInfo(onScroll), needsElementTracking(options))


Just a reminder that this should be removed before release! Apologies if you were already aware of this :3

faradaytrs · 2024-12-06T10:31:41Z

Stil blocked by #2925

headironc · 2024-12-08T11:01:35Z

React 19 released! 😀

mattgperry · 2024-12-09T20:44:22Z

Can someone who’s using 12.0.0 check out 11.13.3 and let me know if that works just as well?

faradaytrs · 2024-12-10T02:03:48Z

Can someone who’s using 12.0.0 check out 11.13.3 and let me know if that works just as well?

thomashexagon · 2024-12-10T07:53:45Z

Can someone who’s using 12.0.0 check out 11.13.3 and let me know if that works just as well?

mattgperry · 2024-12-10T08:48:52Z

That's odd, HTMLAttributesWithoutMotionProps shouldn't exist any more, let me take a look

mattgperry · 2024-12-10T08:51:35Z

@faradaytrs @thomashexagon can you check node_modues/framer-motion/package.json and double check that you have 11.13.3 installed as those types don't exist in dist/index.d.ts here: https://www.npmjs.com/package/framer-motion?activeTab=code

mattgperry · 2024-12-10T09:02:10Z

Reproducing on 19 locally I don't get the className error but do get the onClick any error.

faradaytrs · 2024-12-10T09:05:57Z

Reproducing on 19 locally I don't get the className error but do get the onClick any error.

so should i check or you figured it out?

mattgperry · 2024-12-10T09:12:19Z

@faradaytrs you I believe are running the correct version, now I’m curious about the className

mattgperry · 2024-12-10T09:56:52Z

@faradaytrs This should be fixed with 11.13.4

All: Please use ^11.13.4 going forward, closing this branch out.

eps1lon reviewed May 22, 2024

View reviewed changes

DaniGuardiola mentioned this pull request May 22, 2024

Components: remove Framer Motion WordPress/gutenberg#60975

Open

29 tasks

mattgperry force-pushed the upgrade/react-19 branch from 36e92ac to 11b72f3 Compare June 5, 2024 12:36

mattgperry changed the base branch from main to feature/vite June 5, 2024 12:37

Base automatically changed from feature/vite to main June 12, 2024 11:10

mattgperry force-pushed the upgrade/react-19 branch 3 times, most recently from 215aa43 to 7570162 Compare June 13, 2024 09:37

mattgperry mentioned this pull request Jun 13, 2024

[BUG] Incompatible with React 19 #2668

Closed

steve-marmalade mentioned this pull request Jun 13, 2024

Client side navigation not working properly in latest next@rc for dev vercel/next.js#66508

Closed

mattgperry force-pushed the upgrade/react-19 branch from 441465a to e4a856d Compare June 14, 2024 10:12

mattgperry mentioned this pull request Jun 19, 2024

Fix animations in re-suspended components #2706

Merged

mattgperry changed the base branch from main to feature/react-19-code June 19, 2024 09:18

mattgperry changed the base branch from feature/react-19-code to main June 19, 2024 09:30

jpwallace22 mentioned this pull request Jun 19, 2024

Framer-motion and React19 have type mismatches jpwallace22/personal-site#172

Open

eps1lon mentioned this pull request Jul 1, 2024

React 19 library compat eps1lon/react#10

Closed

22 tasks

mattgperry force-pushed the upgrade/react-19 branch from 1d25284 to 20a5c12 Compare September 4, 2024 13:21

gdarchen mentioned this pull request Oct 18, 2024

chore(next): bump to Next 15 RC2 and bump ESLint to v9 gdarchen/portfolio#190

Merged

tyxla mentioned this pull request Nov 20, 2024

Try: React 19 WordPress/gutenberg#61521

Draft

mattgperry force-pushed the upgrade/react-19 branch 3 times, most recently from 471c7d6 to 07641dd Compare November 22, 2024 09:34

mattgperry force-pushed the upgrade/react-19 branch from 42a2209 to b8d7553 Compare November 22, 2024 12:00

React 19

95c5c31

Fixing dep React 19 Upgrade React 19 Upgrading React 19 fixing gitignore Updating import Fixing 3D types Fixing conflict Fixing conflicts Fixing willChange v12.0.0-alpha.1 Updating to latest RC Latest Fixing test

mattgperry force-pushed the upgrade/react-19 branch from 4c5d88f to 95c5c31 Compare November 22, 2024 12:51

mattgperry added 4 commits November 22, 2024 13:58

Fixing version

4c5bac7

v12.0.0-alpha.2

392c2f6

Latest

4061bc2

Updating measurement size

2f0a067

trevorblades reviewed Dec 6, 2024

View reviewed changes

toggm mentioned this pull request Dec 9, 2024

Dev/update react19 tegonal/Lasius#104

Merged

mattgperry mentioned this pull request Dec 9, 2024

React 19-compatible types #2930

Merged

mattgperry closed this Dec 10, 2024

mattgperry deleted the upgrade/react-19 branch December 10, 2024 09:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React 19 #2667

React 19 #2667

mattgperry commented May 16, 2024 •

edited

Loading

eps1lon commented May 22, 2024

eps1lon May 22, 2024

mattgperry commented May 22, 2024

eps1lon commented May 22, 2024

mattgperry commented May 23, 2024

izakfilmalter commented Jun 7, 2024

steve-marmalade commented Jun 13, 2024

steve-marmalade commented Jun 18, 2024

mattgperry commented Jul 10, 2024 •

edited

Loading

krachtstefan commented Jul 12, 2024

Apezdr commented Jul 15, 2024 •

edited

Loading

lucascurti commented Jul 26, 2024

tyteen4a03 commented Aug 31, 2024

mattgperry commented Sep 4, 2024

bdrtsky commented Oct 11, 2024

mattgperry commented Nov 22, 2024

trevorblades Dec 6, 2024

faradaytrs commented Dec 6, 2024

headironc commented Dec 8, 2024

mattgperry commented Dec 9, 2024

faradaytrs commented Dec 10, 2024

thomashexagon commented Dec 10, 2024

mattgperry commented Dec 10, 2024

mattgperry commented Dec 10, 2024

mattgperry commented Dec 10, 2024

faradaytrs commented Dec 10, 2024

mattgperry commented Dec 10, 2024

mattgperry commented Dec 10, 2024 •

edited

Loading

React 19 #2667

React 19 #2667

Conversation

mattgperry commented May 16, 2024 • edited Loading

TODO

eps1lon commented May 22, 2024

eps1lon May 22, 2024

Choose a reason for hiding this comment

mattgperry commented May 22, 2024

eps1lon commented May 22, 2024

mattgperry commented May 23, 2024

izakfilmalter commented Jun 7, 2024

steve-marmalade commented Jun 13, 2024

steve-marmalade commented Jun 18, 2024

mattgperry commented Jul 10, 2024 • edited Loading

krachtstefan commented Jul 12, 2024

Apezdr commented Jul 15, 2024 • edited Loading

lucascurti commented Jul 26, 2024

tyteen4a03 commented Aug 31, 2024

mattgperry commented Sep 4, 2024

bdrtsky commented Oct 11, 2024

mattgperry commented Nov 22, 2024

trevorblades Dec 6, 2024

Choose a reason for hiding this comment

faradaytrs commented Dec 6, 2024

headironc commented Dec 8, 2024

mattgperry commented Dec 9, 2024

faradaytrs commented Dec 10, 2024

thomashexagon commented Dec 10, 2024

mattgperry commented Dec 10, 2024

mattgperry commented Dec 10, 2024

mattgperry commented Dec 10, 2024

faradaytrs commented Dec 10, 2024

mattgperry commented Dec 10, 2024

mattgperry commented Dec 10, 2024 • edited Loading

mattgperry commented May 16, 2024 •

edited

Loading

mattgperry commented Jul 10, 2024 •

edited

Loading

Apezdr commented Jul 15, 2024 •

edited

Loading

mattgperry commented Dec 10, 2024 •

edited

Loading