`this.handleLoad` isn't a function

[baptisteArno]

When updating from 5.2.4 to 5.2.5

[ryanseddon]

Oh no, i don't see the error in any tests or on the demo page? Can you create a test case?

[kevinfaveri]

same happening to me. Normal usage, but the child component has multiple iframes inside of it:

<Frame title="html-content" sandbox="" draggable={false}>
      <iframe id={iframeId} />
      <DangerousImage iframeId={iframeId} />
    </Frame>

And then there is a parent component that imports this SafeDangerousImage:

<Frame title="html-content" sandbox="" draggable={false}>
      <SafeDangerousImage /> ---> the contents of this one are those above
    </Frame>

[ryanseddon]

Ok just leaving notes for myself and future readers:

I can reproduce the error with any simple usage!

Looking at the stack trace I can see this.handleLoad is trying to be called but in this case this is window and not the Frame instance like it should be.

Digging into the compiled src that ships in npm it seems that maybe babel doesn't correctly reference this as the compiled code converts all references to this -> _this.

https://npmfs.com/package/react-frame-component/5.2.5/lib/Frame.js#L71

[ryanseddon]

I've deprecated 5.2.5 for now on npm, but I think the fix might be to upgrade babel I did try migrating to v7 but still it left the this unchanged in the compiled code?

I'm on vacation until the end of the month so can only look at this sporadically.

If anyone has a fix happy to review an publish when I get time.

[Roman-Maksimov]

I'm facing the same with very basic usage on React@18.0.26

<Frame>
    <div>Viewport</div>
</Frame>

[dannysindra]

Hi folks, I created a PR to fix the issue - please have a look whenever you get a chance ^ #236

@ryanseddon

[ryanseddon]

Thanks everyone especially @dannysindra for doing the PR. Just released v5.2.6