Framer Motion 11.0.13 — TypeError: Right side of assignment cannot be destructured

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'
2
3import { motion } from "framer-motion";
4import { useState, useEffect } from "react";
5
6export function Component() {
7  const [videoLoaded, setVideoLoaded] = useState(false);
8
9  useEffect(() => {
10    setVideoLoaded(true);
11  }, []);
12
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  )
29}

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.