Issue with Modal: Only Loader Visible, Content Not Displaying

[sunnyvaniya21]

Describe the bug

Hi guys,I'm facing an issue when trying to open a modal. In the modal's section, I only see a loader, and it doesn't show any content.

To Reproduce

Steps to reproduce the behaviour:

1. Just Open an Modal

Expected behaviour

While click on open modal button it's show the content of modal in modal's section.

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

• @shopify/app-bridge @ 3.7.10
• @shopify/app-bridge-react @ 4.1.3
• @shopify/polaris @ 12.27.0

Platform

• OS: [Windows]
• OS Version: [10]
• App: [Chrome]

Additional context

[charlesdobson]

Hi @sunnyvaniya21,

Could you please provide a code snippet of how you're using the modal?

[sunnyvaniya21]

[charlesdobson]

I'm not able to reproduce with the example you provided. Could you try out a few things for me?

1. Make sure you're in a new browser session (i.e. reload in a new tab).
2. Provide any extra info of your setup (frameworks, etc) that you think might be relevant.
3. Provide a development store that I can see the behaviour on (feel free to ping me on the Partners Slack if you'd prefer!)

[YaTree]

Hello all.

I have a similar issue, but it happens only in a specific scenario:

1. Login to the partner account
2. go to "stores"
3. Login into any of the stores with the app
4. Search for the app and open it
5. Do the magic to open a modal window.

The result - is endless loading, I found that there is this log in the console: Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin 'https://' in a call to 'postMessage'. at e (https://cdn.shopify.com/shopifycloud/app-bridge.js:1:47579) at https://cdn.shopify.com/shopifycloud/app-bridge.js:1:48632

If I refresh the page and repeat steps 4 and 5 my modal window works as expected. Please note: that my application passed review, so it means that my app-bridge was setup correctly, I don't know what I should add to the configuration and where to resolve it, just hope that my customers do not face the issue because they log in to the admin console differently.

@charlesdobson Is this input helpful?

[shatishdesai202]

426,

@YaTree , @charlesdobson, the same issue, while the app-bridge-react modal is open and you try to reload the page. not sure why it's happening, is it because of the save bar or a Modal-related issue

[YaTree]

The exception error was caused by "missing" host parameters in the config (that is optional), after fixing it - the issue with endless loading still persists, so it means that the exception is not related to our problem.

[VladIliukhaAleannLab]

Hello all.

I have a similar issue, but it happens only in a specific scenario:

1. Login to the partner account
2. go to "stores"
3. Login into any of the stores with the app
4. Search for the app and open it
5. Do the magic to open a modal window.

The result - is endless loading, I found that there is this log in the console: Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin 'https://' in a call to 'postMessage'. at e (https://cdn.shopify.com/shopifycloud/app-bridge.js:1:47579) at https://cdn.shopify.com/shopifycloud/app-bridge.js:1:48632

If I refresh the page and repeat steps 4 and 5 my modal window works as expected. Please note: that my application passed review, so it means that my app-bridge was setup correctly, I don't know what I should add to the configuration and where to resolve it, just hope that my customers do not face the issue because they log in to the admin console differently.

@charlesdobson Is this input helpful?

it helped me :) I investigated the cause of this error, it turned out that during the first initiation, there was no host value in the config (for the shopify-app-bridge script), which are necessary to form parameters to check origin after which I added as hot fix <meta name="shopify-host" content={host ?? ""} /> before initiating the shopify-app-bridge script in the _document.tsx file (I'm using Next.js) bc I thought that this config was formed from meta-tags (here I guessed) and that solved the problem (for now)

[YaTree]

Unfortunately, it only fixed the exception, I don't receive it anymore with the provided host, but the Modal component still does not work. Without refreshing the page - I see only endless loading.

I rechecked, nothing. no logs. no indication...

[pama1999]

I could resolve the issue by manually synchronizing my device clock in the Windows date and time settings. This problem occurs every other week again. Hope this might help someone.