Framer Motion error in NextJs while switching pages/routes

[LinThitHtwe]

I got a framer motion error while switching detail page to home page in nextJs and the animation stop working when entering back to detail page again. If I reload , that error is gone and work for 1 time until it happen again.

I just start using framer motion for the first time, I've tried to find the problem but can't and have no idea what to do.

I'm using Next 14 btw, with typescript.

This is the full error message

Unhandled Runtime Error
TypeError: Cannot convert undefined or null to object

Call Stack
hasOwnProperty
<anonymous>
Object.eval [as test]
(app-pages-browser)\node_modules\framer-motion\dist\es\value\types\color\utils.mjs (9:0)
Object.test
(app-pages-browser)\node_modules\framer-motion\dist\es\value\types\color\index.mjs (7:21)
getMixer
(app-pages-browser)\node_modules\framer-motion\dist\es\utils\mix\complex.mjs (30:20)
mix
(app-pages-browser)\node_modules\framer-motion\dist\es\utils\mix\index.mjs (10:26)
MainThreadAnimation.initPlayback
(app-pages-browser)\node_modules\framer-motion\dist\es\animation\animators\MainThreadAnimation.mjs (97:63)
MainThreadAnimation.onKeyframesResolved
(app-pages-browser)\node_modules\framer-motion\dist\es\animation\animators\BaseAnimation.mjs (58:0)
DOMKeyframesResolver.onResolved [as onComplete]
(app-pages-browser)\node_modules\framer-motion\dist\es\animation\animators\MainThreadAnimation.mjs (72:0)
DOMKeyframesResolver.complete
(app-pages-browser)\node_modules\framer-motion\dist\es\render\utils\KeyframesResolver.mjs (149:0)
eval
(app-pages-browser)\node_modules\framer-motion\dist\es\render\utils\KeyframesResolver.mjs (47:0)
Set.forEach
<anonymous>
measureAllKeyframes
(app-pages-browser)\node_modules\framer-motion\dist\es\render\utils\KeyframesResolver.mjs (47:0)
Object.process
(app-pages-browser)\node_modules\framer-motion\dist\es\frameloop\render-step.mjs (91:0)
processStep
(app-pages-browser)\node_modules\framer-motion\dist\es\frameloop\batcher.mjs (26:0)
Array.forEach
<anonymous>
processBatch
(app-pages-browser)\node_modules\framer-motion\dist\es\frameloop\batcher.mjs (38:0)

[kevinAtOoof]

Having the same while changing page

Unhandled Runtime Error
TypeError: Cannot convert undefined or null to object

Call Stack
hasOwnProperty
<anonymous>
Object.eval [as test]
node_modules/framer-motion/dist/es/value/types/color/utils.mjs (9:1)
Object.test
node_modules/framer-motion/dist/es/value/types/color/index.mjs (7:22)
getMixer
node_modules/framer-motion/dist/es/utils/mix/complex.mjs (29:21)
mix
node_modules/framer-motion/dist/es/utils/mix/index.mjs (10:27)
MainThreadAnimation.initPlayback
node_modules/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs (97:64)
MainThreadAnimation.onKeyframesResolved
node_modules/framer-motion/dist/es/animation/animators/BaseAnimation.mjs (58:1)
DOMKeyframesResolver.onResolved [as onComplete]
node_modules/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs (72:1)
DOMKeyframesResolver.complete
node_modules/framer-motion/dist/es/render/utils/KeyframesResolver.mjs (149:1)
eval
node_modules/framer-motion/dist/es/render/utils/KeyframesResolver.mjs (47:1)
Set.forEach
<anonymous>
measureAllKeyframes
node_modules/framer-motion/dist/es/render/utils/KeyframesResolver.mjs (47:1)
Object.process
node_modules/framer-motion/dist/es/frameloop/render-step.mjs (91:1)
processStep
node_modules/framer-motion/dist/es/frameloop/batcher.mjs (26:1)
Array.forEach
<anonymous>
processBatch
node_modules/framer-motion/dist/es/frameloop/batcher.mjs (38:1)

[palespectre]

I had the same issue, and upgrading to the latest version of Framer-motion and Next fixed it for me