Update: The issue has been fixed in Framer Motion 11.0.14.

After over an hour of searching Google, debugging my code with ChatGPT, and dissecting every single component on this website I finally found the culprit. 😡

Earlier today I upgraded Next.js to 14.1 and Framer Motion to version 11.0.13. Everything was building fine on Vercel.

However, the latest version of Framer Motion introduced a regression that crashes Safari with the following error:

1TypeError: Right side of assignment cannot be destructured

This is completely crazy because it's a runtime error that crashes the whole app only in Safari — Chrome and other browsers are unaffected.

What piece of code is actually causing this meltdown?

A conditional inside the animate prop in a motion component that comes from useState. Here is the code:

1'use client'
3import { motion } from "framer-motion";
4import { useState, useEffect } from "react";
6export function Component() {
7 const [videoLoaded, setVideoLoaded] = useState(false);
9 useEffect(() => {
10 setVideoLoaded(true);
11 }, []);
13 return(
14 <motion.div
15 className="absolute h-[80px] w-[80px]"
16 initial={{
17 opacity: 1,
18 }}
19 animate={{
20 opacity: videoLoaded ? 0 : 1,
21 }}
22 transition={{
23 type: "spring",
24 stiffness: 70,
25 damping: 10,
26 }}
27 />
28 )

How to fix it?

Upgrade Framer Motion to version 11.0.14 straight away.

  • Downgrade Framer Motion to version 10.17.4.
  • Remove the conditional from the animate prop if you don’t need to use it to achieve your animation.

But I would suggest downgrading until this is fixed, since there could be more issues that haven't been discovered yet.

get notified when i write something new or launch a new project right into your inbox.


subscribe on telegram

Thanks for your time & attention.