Embedding on NextJS - Stuck on Loading and constant iframe refresh

AI-generated summary

vitor.medeiro is experiencing issues integrating Discourse as a comment system on their NextJS blog. The iframe gets stuck on “Loading Discussion” and throws a console error after 10-20 seconds. The error message indicates a mismatch between the target origin and the recipient window’s origin. vitor.medeiro suspects the issue might be related to the iframe’s referrer policy changing to strict-origin-when-cross-origin. Keith_Hon has requested minimal reproduction codes to help troubleshoot the problem.

Hi Support Team!

I’m a developer from Brazil and i starter a company blog on NextJS, a server that handle SSR content for React. I’m trying to use discourse as a comment system for my blog, but i’m having a tough time on it.

I’m actually using the bitnami docker discourse image.

The embed javascript file needed for load the iframe is downloading normally, but the iframe stuck at
Loading Discussion.
I’m currently using the following window object:

DiscourseEmbed = {
    discourseUrl: 'https://comments-valelabs.domain.com.br/',
    discourseEmbedUrl: 'https://valelabs.domain.com.br/post/${slug}',
    discourseReferrerPolicy: 'no-referrer-when-downgrade'
}

where slug is the current url of my blog post.

After 10-20 seconds of loading, it throws an error to console:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://comments-valelabs.domain.com.br') does not match the recipient window's origin ('https://valelabs.domain.com.br')

I noticed that my iframe refreshed and changed the referer-policy to strict-origin-when-cross-origin, maybe it’s the cause of the error above.

Can anybody help me? Thanks for your time!

Could you provide minimal reproduction codes?