setupModalAutoSizing and Modal.data dispatches fail on admin.shopify.com

[forsbergplustwo]

Describe the bug

When using app bridge Modals on a admin.shopify.com based store, the following error is thrown whenever postMessages are dispatched.

This happens both when calling the provided function: setupModalAutoSizing(app) as well as dispatching data through the provided modal api: app.dispatch(Modal.data(payload));

vendors-node_modules_shopify_app-bridge-host_index_js-ee659f2a4470f8970589edc63adaff870c5df6cb3d39707b448e7261ca44b42b.js:formatted:4748
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://opp.test') does not match the recipient window's origin ('https://admin.shopify.com').

The same code works as expected when on a xxxxx.myshopify.com/admin based store.

To Reproduce

Steps to reproduce the behaviour:

1. Launch a app bridge based modal from within a admin.shopify.com based store, which includes the setupModalAutoSizing(app) call
2. Notice the modal does not resize
3. Notice the error logged in the console

Same app on .myshopify.com based store:

Expected behaviour

I would expect the functions to work the same on a admin.shopify.com based store, as it does for a xxxxx.myshopify.com/admin based store.

Contextual information

Packages and versions

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

• "@shopify/app-bridge-utils", "3.5.1"
• "@shopify/app-bridge", "3.7.2"

Platform

• App: Chrome, Firefox & Safari all have the same issue.

Additional context

This is not a new app, it has had these functions in production for 1+ years, and as mentioned works on myshopify.com based stores.

[elanalynn]

Thanks for reporting this @forsbergplustwo. We'll investigate the issue!

[forsbergplustwo]

Thank you @elanalynn 🙏 Any luck in tracking it down?

Not sure if it makes tracking this down easier, but I also see the same error being logged by Shopify's own xxxxxxx.shopifyapps.com services:

[forsbergplustwo]

I've worked out the issue causing this, and have it fixed locally 🎉

When creating the modal, if you pass a path that does not contain the host=xxxxxxxxxxxxx parameter, then all communication with the embedding app stops working.

_Sidenote: Unfortunately we cannot add host to default_url_options Rails (as it's already used internally by Rails to set the url.host), so we have to pass it in manually append it to urls, without path helpers. Simplified example:_ <%= exports_path(ids: @order_ids, order_type: @order_type).to_s + "&host=#{@host}"

Hopefully this helps others.