Loading multiple copies of framer-motion breaks in subtle ways

[jscheel]

I have a situation where I use framer-motion in a ui library package and in a project that installs that package as a dependency.

With react, if you try to use hooks in both places, it will throw an error because the hooks will be overwritten. Here's an issue about that: facebook/react#14257 (comment).

Basically, for local development, the preferred method is to make react a peerDependency, and then npm|yarn link it so that you only ever have one copy. Here's a great article on that: https://yvonnickfrin.dev/handling-peer-dependencies.

For framer-motion, I discovered a subtle bug. If I provide a motionValue from my library, and then try to use it in my project, it works, but not exactly right. The motion value is updated, and any transforms I create with it are updated as well. But any motion components that I pass the transform into (via the style prop) do not get updated. I'm not 100% certain why this is, but using only a single yarn linked version of the framer-motion makes everything happy again.

I'm guessing it would be best for framer-motion to detect if it has been included multiple times and then throw an error or warning, just like react does.

[bercos]

I'm having a similar but less subtle bug. If I bundle a react component with a framer-motion styled component (tested using parcel and rollup) and then use that component in a separate react application (served using parcel) I get an invalid hook call error (attached below).

[nikoferro]

Leaving a +1 here. Spent a couple of hours today debugging in the shadows while getting the invalid hook error on a NextJS + Internal library case, where both use framer-motion. I think having a message warning about the different versions would be great.

In the meantime, i got to solve it following @jscheel recommendation

but using only a single yarn linked version of the framer-motion makes everything happy again.

[morecommits]

@bercos I am facing the same error atm when using electron-webpack. Did you ever find a solution?