search

Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
82 stars 9 forks source link

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

Closed jasong689 closed 3 months ago

jasong689 commented 3 months ago

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:

Platform

Additional context

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

meecrobe commented 3 months ago

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.

image

henrytao-me commented 3 months ago

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

jasong689 commented 3 months ago

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 commented 3 months ago

@jasong689 It's fixed.

jfanals commented 3 months ago

@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