Motion: [BUG] Render into iframe

[anilanar]

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

[anilanar]

Note: I can make a PR, if you are willing to accept it.

I've just noticed that getting rid of the invariant causes another problem at:

    var node = typeof nodeOrSelector === 'string' ? document.querySelector(nodeOrSelector) : nodeOrSelector;

because document !== document of ref.current.

The way emotion solves this is by having a React Provider for user-land to pass down such global dependencies. In motion's case, it'd be passing down document, HTMLElement, window, SVGElement etc. It's simply window.

export const GlobalContext = createContext<Window>(window);

...

<GlobalContext.Provider value={iframe.window}>
  ...
</GlobalContext.Provider>

Then motion source code needs to pass the window instance around and prefix document, HTMLElement, SVGElement etc. with windowInstance..

[mrmckeb]

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`

[rsoury]

Ran into the same issue using the react-frame-component package.
The purpose was to encapsulate styling. My workaround was to make use of Shadow DOM using https://github.com/Wildhoney/ReactShadow

Unfortunately, Shadow DOM is not supported without polyfills on legacy browsers so would love an update on this issue.

[sivakumar-kailasam]

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

[vignestion]

Stuck with the same problem any update on this issue?

[pm990320]

+1 - also running into this issue with iframes. Likewise happy to look at contributing this

[dlosie]

Having the same issue trying to use this with react-frame-component. Did anyone here find a solution? Or would it be better to switch to react-spring if you need to render into iframes?

[sivakumar-kailasam]

I posted about this on the framer-motion channel on the framer discord server. I hope someone from the framer team eventually responds to this 🤞🏻

[mattgperry]

This seems to be fixed at some unknown point in the past so closing this issue

[james2406]

It looks like this is still an issue. I modified the Drag demo to render into an iframe and I see the "No ref found" error:
https://codesandbox.io/s/framer-motion-drag-iframe-ghqe2. Has anyone managed to get it working?

Edit: Sorry. Just realised that I was using an outdated version of Framer Motion, however, you can see that there is still an issue with the demo https://codesandbox.io/s/framer-motion-drag-iframe-ghqe2

[james2406]

Can this issue be reopened please?