iFrame not mounting after update to v5.1.0

[calculuschild]

I've been using this package without problem for a good while now (v4.1.3). Finally tried updating to v5.1.0 and everything seems fine until I try to refresh the browser page. After I refresh Chrome, the iframe never fully mounts and contentDidMount never triggers. Sometimes after refreshing the browser several more times contentDidMount will trigger again but it's not predictable.

It also seems that after first loading a page with an iFrame in a given session, then navigating away and revisiting that page will cause the same issue.

Any ideas to help me with this issue?

[equinusocio]

Same here, i had to downgrade.

[calculuschild]

Any feedback from the owner @ryanseddon on this? This is a pretty critical bug making v5+ essentially unusable.

[ryanseddon]

Something is funny going on with my notifications I only got an email once you mentioned me, will take a look at this soon. If you've done any investigation already would be keen to know any findings you've made.

[ryanseddon]

Could you create a small test case showing the issue I just did a quick one here. I don't see any issues on refresh but I don't know what the exact steps are to reproduce.

Does this issue happen on 5.0.x too? Wondering if the move to srcdoc might be the issue.

[linxianxi]

I've been using this package without problem for a good while now (v4.1.3). Finally tried updating to v5.1.0 and everything seems fine until I try to refresh the browser page. After I refresh Chrome, the iframe never fully mounts and contentDidMount never triggers. Sometimes after refreshing the browser several more times contentDidMount will trigger again but it's not predictable.

It also seems that after first loading a page with an iFrame in a given session, then navigating away and revisiting that page will cause the same issue.

Any ideas to help me with this issue?

same issue.I used next.js.

[equinusocio]

This is my component, which works with v4.x

import React, { useState } from 'react'
import Frame, { FrameContextConsumer } from 'react-frame-component'
import { useThemeContext } from '@wonderflow/react-components'

export const LiveFrame: React.FC = ({
  children,
  ...props
}) => {
  const [pageHead] = useState(typeof document !== 'undefined' ? [...document.head.children as any] : [])
  const { theme } = useThemeContext()

  return (
    <Frame
      frameBorder={0}
      width="100%"
      height="100%"
      loading="lazy"
      {...props}
    >
      <FrameContextConsumer>
        {
            ({ document }: { document: any }) => {
              pageHead.map(
                item => (
                  (item.nodeName === 'STYLE' || item.nodeName === 'LINK') && document.head.appendChild(item.cloneNode(true))
                )
              )

              document.documentElement.style.background = 'none'
              document.documentElement.dataset.theme = theme

              return children
            }
          }
      </FrameContextConsumer>
    </Frame>
  )
}

[ryanseddon]

@equinusocio are you able to extract out a small test case on codesandbox.io?

[xmflsct]

Same here when using Gatsby. In development mode it is working fine, but when it is deployed, the iframe never loads.

[ryanseddon]

@equinusocio I tried your code and it renders fine? What do I need to do to reproduce it? https://codesandbox.io/s/goofy-morning-ls3uk?file=/src/App.js

@xmflsct do you have a test case so I can see the issue, I'm yet to be able to recreate this.

[calculuschild]

What do I need to do to reproduce it?

The initial page load works fine. The bug occurs for me when refreshing the page or navigating forward and back in the browser history.

[ryanseddon]

@calculuschild I really need a test case that shows the issue happening, I've tried my demo and refreshing multiple times in several browsers without issue. I can't fix or diagnose the issue otherwise.

[baptisteArno]

@ryanseddon here is a reproduction: https://github.com/baptisteArno/next-react-frame-bug

Just clone the repo, install dependencies and run yarn dev, the div won't be appended to the iframe. I didn't have the chance to try in production mode when deployed

[baptisteArno]

Still not working with version v5.2.3.

A workaround to make this work is to render your componenet containing the frame conditionally like this:

const [show, setShow] = useState(false)
useEffect(() => {
  setShow(true)
}, [])

if(!show) return <></>
return <Frame>...</Frame>

So this issue definitely is linked to server side rendering.

[ryanseddon]

Haven't had much time to dig into this again, if you have any ideas or get a better understanding of why an uncached document makes a difference with srcdoc and not firing certain readyStates I would love to know.