Rendered @shopify/app-bridge-react modal src does not have an environment set

[jasong689]

Describe the bug

If you set the src of Modal from @shopify/app-bridge-react to another route within your embedded app, the AppBridge that is returned from useAppBridge from that context has an undefined value for shopify.environment.

To Reproduce

Steps to reproduce the behaviour:

In an embedded app using app bridge v4 and @shopify/app-bridge-react v4.1.1

1. Render the Modal component from @shopify/app-bridge-react in the root of the embedded app
2. Set the src prop of the Modal to /
3. Within the same component use the useAppBridge hook from @shopify/app-bridge-react to return an instance of app bridge

const shopify = useAppBridge();

4. Log the value of shopify.environment
5. Add a button which opens the modal
6. When the modal opens, the value of shopify.environment within the modal's iframe is undefined

If applicable, add screenshots to help explain your problem.

Expected behaviour

The values for shopify.environment should be the same between the embedded app and the modal.

Contextual information

Packages and versions

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

• app bridge v4
• @shopify/app-bridge-react @ 4.1.1

Platform

• OS: macOS
• OS Version: 12.6
• App: Chrome Version 122.0.6261.129 (Official Build) (arm64)

Additional context

Add any other context about the problem here, such as your app’s configuration (Node, Next.js, Rails).

[meecrobe]

It neither has a toast property. It's impossible to show toast messages on routes rendered inside a Modal with src prop. By the way, there are even more properties missing.

[henrytao-me]

Modal src has to communicate with the main app for all App Bridge features. Modal is just a presentation layer.

[jasong689]

Modal src has to communicate with the main app for all App Bridge features. Modal is just a presentation layer.

If that's the case it sounds like the instance of app bridge rendered within Modal should have the environment set as well.

[henrytao-me]

@jasong689 It's fixed.

[jfanals]

@meecrobe you should be able to get a toast working from inside the Modal src with this code:

window.opener.shopify.toast.show('this is a toast')

And it also works for the ResourcePicker: window.opener.shopify.resourcePicker