[BUG] TypeError: Cannot read properties of undefined (reading 'needsInterpolation') when using SVG Paths, Next 13, and SWC

[shaunchander]

When using a motion path component (<m.path />, <motion.path />) with Next 13, theres' a client-side error that pops up saying Cannot read properties of undefined (reading 'needsInterpolation').

I've reproduced the issue here: https://codesandbox.io/p/sandbox/magical-snowflake-9flnn5?file=%2Fpages%2Findex.tsx&selection=%5B%7B%22endColumn%22%3A11%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A11%2C%22startLineNumber%22%3A3%7D%5D

This issue breaks any SVG path animation (as in, animations don't play) in both dev and prod environments.

I'm willing to investigate this further to see if there's a potential quick fix!

EDIT: This also occurs within Vite w/Typescript and SWC, which leads me to believe this is SWC-specific.

[agarwalamn]

@shaunchander was facing the same issue today,
for me, it worked if i remove the type: "linear" from the transition object. Something that might help to further investigate this

[mattgperry]

There’s never been a type: “linear” option, the reason this is breaking now is some logic has changed to not return a default type. I can change that back so it does but even so this isn’t a valid option

[shaunchander]

Ah, thanks @mattgperry.

[mattgperry]

Just reopening so I remember to make this more defensive!

[antoniodinovi]

I have the same issue with next 13.1.1

[ghavamzadeh]

Same issue with Next.js v13.0.2 TS

[abdullah-manafikhi]

I'm getting the same error with version Nextjs 14.1.0
Any updates?

[monecchi]

According to the latest framer-motion docs, it seems linear is a value-specific transition and it is not a valid value for a transition type property.

From the docs:

"A transition defines how values animate from one state to another. It can also accept props that define which type of animation to use, you can choose one of these: tween, spring or inertia. Is none is chosen, type property is set to "spring" by default".

Value-specific transitions

A different set of transition settings can be defined for each specific value. Also there's the concept of frame-motion's easing functions, so use it like bellow and that should work.

transition={{
  ease: "linear"
}}

These strings are the built-in named easing functions in Framer.

"linear"
"easeIn", "easeOut", "easeInOut"
"circIn", "circOut", "circInOut"
"backIn", "backOut", "backInOut"
"anticipate"

As the strings above, linear is a named easing function and not a transtion type property.

I hope it can help you guys 🙌