App Bridge Error: The shopify global is not defined when accessing app directly

Shopify Discussion
1

Hi everyone,

I’m building a Shopify embedded app using React and App Bridge. Everything works fine when the app is accessed through the Shopify Admin. However, when I access the app directly via a live URL like:

https://dm.starkiu.com/

I get the following error in the browser console:
Uncaught Error: The shopify global is not defined. This likely means the App Bridge script tag was not added correctly to this page

What I’ve tried:

  • I check for the shop param and redirect to https://shopify.com/login?return_to=… if missing.

  • I delay App Bridge Provider rendering until shop and host exist.

  • The app works when loaded from the Shopify admin.

    My goal:
    I want to redirect users who access the app URL directly (without a shop param) back to Shopify login or to the embedded app within the Shopify admin.

    Any ideas on how to fix this? Is there a reliable pattern to prevent this App Bridge error entirely?

2

You’re encountering the typical issue with Shopify App Bridge when the app is accessed outside the Shopify Admin iframe.

The fix is to:

Check for shop and host in the URL — if missing, redirect to https://shopify.com/login?return_to

Only initialize App Bridge when those params are present.

Optionally, use Redirect from @Shopify_77 /app-bridge/actions to redirect into the Admin panel when accessed directly.

That should prevent the shopify global is not defined error and keep users in the embedded context