React 19

[mattgperry]

This PR upgrades React to v19.

Fixes #2668

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

• Upgrade React
• Build success
• Fix types
• Fix SSR tests
• Fix unit tests
• Fix e2e tests
• Test backwards compatibility with 18.x (tested - because of changes to types it doesn't look like it)
• Merge in Upgrade React Three Fiber 9 #2699 and restore 3d tests to CI
• Upgrade to React 19 final on release
• Release 12.0.0

[eps1lon]

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]

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]

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

[eps1lon]

@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]

@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]

So hype for this.

[steve-marmalade]

Thanks for pushing on this. I'm very happy to report that [email protected] is working well in my project running the latest NextJS canary and the latest react-19 RC.

[steve-marmalade]

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]

@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]

Thanks for pushing on this. I'm very happy to report that [email protected] 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 [email protected]? 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]

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]

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]

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

[mattgperry]

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

[lucascurti]

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 In case you want to give it a try, I've tested v12.0.0-alpha.1 and this is fixed for me

[jeffijoe]

Thanks @mattgperry, that seems to fix all the issues I've been having, except for one: popLayout doesn't seem to have any effect. Are there still any gotchas to watch out for? I remember reading that opacity could be a problem but I tried removing opacity styles and still see the same issue in that the space that the exiting element occupied is not made available until the animation is done.

[bdrtsky]

useAnimationControls is not working in Framer Motion 12?

[mattgperry]

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

[imjeehoo]

Maybe you need to update Current release to 12.0.0-alpha.2