No AppBridge context provided

Describe the bug

After migrating our application using the instructions provided in the Shopify Migration Guide, I’ve encountered an issue with the [email removed] components.

To Reproduce

Upon integrating the [email removed] components such as “Modal”, “Titlebar”, etc., the application breaks, resulting in error message - “Uncaught Error: No AppBridge context provided”. I have attached screenshots depicting the errors for reference.

  • The migration process involved migrating all components as migration files, including adding script tags and secret keys while removing the provider.
  • Interestingly, when utilizing the modal component as an HTML tag ( ui-modal id="my-modal"), the application functions as expected without any errors.

Expected Behavior:

I expect the application to function properly even when utilizing the [email removed] components such as , , etc. There should not be any errors or disruptions to the application’s functionality.

Packages and versions

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

  • @shopify/app-bridge [email removed] ^3.7.10
  • @shopify/app-bridge-react [email removed] ^4.1.3
  • @shopify/polaris [email removed] ^12.12.1

Screenshots: