motion: [BUG] Render into iframe

When a motion.div (or any motion component) is rendered into an iframe, the following invariant fails:

invariant(ref.current instanceof Element, "No `ref` found. Ensure components created with `motion.custom` forward refs using `React.forwardRef`");

Although ref.current is also an Element, it’s an Element from another window. Thus it doesn’t belong to the same prototype chain as the one referenced in above codeinstanceof Element.

A possible solution is to use ref.current.constructor.name? Or remove the invariance?

https://codesandbox.io/s/framer-motion-iframe-bug-x7ud9

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 9
Comments: 16 (3 by maintainers)

Most upvoted comments

Can this issue be reopened please?

james2406 on Oct 25, 2020

@InventingWithMonster Any suggestions/directions for anyone interested in raising a PR for this?

sivakumar-kailasam on May 1, 2020

We’ve just hit a similar iframe related error. I think the fix that @anilanar suggested seems great, are the team OK if he (or I) look to implement this?

We’re seeing this when using motion.div inside of an iframe:

No `ref` found. Ensure components created with `motion.custom` forward refs using `React.forwardRef`

mrmckeb on Dec 13, 2019