'IntersectionObserver' parameter 1 in not of type 'Element'

[KhoiUna]

Describe the bug I got this warning in the browser Console

[iframe-resizer][iFrameResizer0] Version mismatch

The parent and child pages are running different versions of iframe resizer.

Parent page: 5.0.2 - Child page: 5.2.2.

To Reproduce Steps to reproduce the behavior:

1. Go to Inspector > Console.
2. Navigate to the page using iframe-resizer.

Expected behavior Should not log this.

Screenshots

Desktop (please complete the following information):

• OS: Linux PopOS.
• Browser: Chrome.

Additional context N/A

[davidjbradshaw]

To start with I’m more concerned about the error with IntersectionObserver. Would you be able to send me a link to the page with the error, so I can investigate the issue.

[davidjbradshaw]

Then I’m interested to know why we should not warn about mismatched versions?

[davidjbradshaw]

Think I have a fix, if you would like to try the latest beta version in the iframe.

[KhoiUna]

Think I have a fix, if you would like to try the latest beta version in the iframe.

How can I try the beta? npm install @iframe-resizer/react@beta ??

[davidjbradshaw]

Yes, but with the iframe-resizer/child package.

[KhoiUna]

Doing this in package.json solved the mismatch version issue:

"@iframe-resizer/child": "^5.2.3",
"@iframe-resizer/react": "^5.2.3",

npm install @iframe-resizer/react@beta did not fix that.

However, I still got this error:

Nonetheless, it is not affecting the app.

[davidjbradshaw]

The issue is inside the iframe, so you need the beta version of the child script.

npm install @iframe-resizer/child@beta

[KhoiUna]

I installed the beta version for both:

//package.json
"@iframe-resizer/child": "^5.2.4-beta.1",
"@iframe-resizer/react": "^5.2.4-beta.1",

But still got the errors:

[davidjbradshaw]

The child page is still on the older version, you might need to do a hard reload.

[Smoles]

I noticed the IntersetionObserver error also. Tried updating to 5.2.4-beta.1 (both child and parent) but still getting that error.

[davidjbradshaw]

@Smoles any chance you can send me a link to an example, so I can investigate further?

[davidjbradshaw]

Actually just published 5.2.4-beta.2 which will catch the error and log out the offending data, so I can hopefully get a better idea of the issue.

[Smoles]

Unfortunately the site is not publicly accessible. I've updated to beta.2 and attached the console log.

localhost-1723573397887.log

[davidjbradshaw]

That is very strange. What I see is the following, but when I add a comment in to my test page I don't get the same error.

[iframe-resizer][AccountManagementIFrame] element: [object Comment] (object)

Would you be able to paste the comment in here? Or email it to me at info@iframe-resizer.com.

[Smoles]

Not sure if this helps but I put a break point in the catch block and took a screenshot. This is not something I'm setting. The child website is a Blazor WASM Client (.Net 8) application using the MudBlazor component library. Seems like maybe the comment object is coming from either Blazor or MudBlazor.

[davidjbradshaw]

@Smoles Thank you that was really useful and has taken me into yet another obscure part of the DOM API. The solution I think is to run the following safety check before passing an element to an observer.

if (el?.nodeType !== Node.ELEMENT_NODE) return

I've just published Beta.3 and would be obligated if you can give it a go, as I can still not replicate the issue, even though I now understand it.

[Smoles]

Different error now.

[davidjbradshaw]

Thanks, basically the same issue, but in the code to setup resizeObservers this time. I've now refactored that section to streamline the performance a bit and added the same safety check as I did for the intersectionObservers.

Just published Beta.4 and hopefully it works this time.

[Smoles]

No errors! Thanks for working through the issue!

[KhoiUna]

I don't know how y'all installed the beta version. I'm using the react package.

I could install the beta version for the react package, but installing the beta version of the child page package did not work for me.

[davidjbradshaw]

@KhoiUna You probably just need to clear the browser cache.

[davidjbradshaw]

@Smoles any luck with beta.4?

[Smoles]

@davidjbradshaw Maybe you missed my post above, no more errors and as far as I can tell everything is working!

[davidjbradshaw]

Ah yes sorry, not sure how I missed that. Thanks for all your help. Have one other small fix to do and I will then release this.

[Smoles]

Awesome thanks, let me know when the official release is ready. Any ideas on timing on that (just so I can plan a few things on my side)?

[davidjbradshaw]

Just published V5.2.4. Thank you both for your help with this one.