Shopify App Bridge failed to load

GraphQL Admin API Troubleshooting
1

Still getting error for below script: Shopify App Bridge failed to load.

Please help to fix stuck here for many days. I will really really appriciate.

<script>
  //let sessionToken = null;

  document.addEventListener("DOMContentLoaded", async function () {
    //const AppBridge = window["app-bridge"];
    const AppBridge = window.Shopify?.AppBridge;

    if (!AppBridge || !AppBridge.createApp || !AppBridge.utilities) {
      console.error("Shopify App Bridge failed to load last.");
      return;
    }

    const createApp = AppBridge.createApp;
    const { getSessionToken } = AppBridge.utilities;

    const app = createApp({
      apiKey: "f695b1811cb0c61d054d4a3e70f1035c", // 🔑 Replace with your actual key
      host: new URLSearchParams(window.location.search).get("host"),
      forceRedirect: true
    });
    
    const { TitleBar } = AppBridge.actions;

    TitleBar.create(app, {
      title: 'Dummy Data Dashboard',
    });


    try {
      sessionToken = await getSessionToken(app);
      console.log("Session token acquired:", sessionToken);

      const response = await fetch("/dummydata/auth/verify_token.php", {
        method: "POST",
        headers: {
          "Authorization": "Bearer " + sessionToken,
          "Content-Type": "application/json"
        },
        body: JSON.stringify({})
      });

      const data = await response.json();
      console.log("Token verified:", data);
    } catch (err) {
      console.error("Session token fetch/verify failed:", err);
    }
  });
</script>
2

It looks like you are using the old Shopify app bridge.

You need to migrate to the new one which is not a npm package

3

I am working with PHP

4

Okay, that’s still not how you use the latest app bridge regardless of the language :blush:

You don’t need to create the app that way. If you checkout the docs for the latest version I linked.

You add two lines to the head of the file and then it automatically adds the Shopify instance to the window and you can access methods on it.
It will also automatically instrument fetch calls with access tokens too

5 
<?php
session_set_cookie_params([
    'lifetime' => 0,
    'path' => '/',
    'domain' => 'purchasetheme.com',
    'secure' => true,
    'httponly' => true,
    'samesite' => 'None',
]);
session_start();

if (!isset($_SESSION['shop']) || !isset($_SESSION['host'])) {
    die("Session expired. Please reinstall the app.");
}

$shop = $_SESSION['shop'];
$host = $_SESSION['host'];
?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Dummy Data Dashboard</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="shopify-api-key" content="f695b1811cb0c61d054d4a3e70f1035c" />
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
</head>
<body>
  <shopify-app-bridge-host></shopify-app-bridge-host>
  <h2>Dummy Data App <?php echo $shop;?> => <?php echo $host;?></h2>
  <div id="status">Verifying token...</div>

<script>
  document.addEventListener("DOMContentLoaded", async function () {
    const AppBridge = window.Shopify?.AppBridge;

    if (!AppBridge || !AppBridge.default || !AppBridge.actions || !AppBridge.utilities?.getSessionToken) {
      console.error("❌ App Bridge failed to load.");
      document.getElementById("status").innerText = "❌ App Bridge failed to load.";
      return;
    }

    const createApp = AppBridge.default;
    const actions = AppBridge.actions;
    const getSessionToken = AppBridge.utilities.getSessionToken;

    const app = createApp({
      apiKey: "f695b1811cb0c61d054d4a3e70f1035c",
      host: "<?php echo htmlspecialchars($host); ?>",
      forceRedirect: true
    });

    actions.TitleBar.create(app, { title: "Dummy Data Dashboard" });

    try {
      const token = await getSessionToken(app);
      console.log("✅ Token:", token);

      const response = await fetch("/dummydata/auth/verify_token.php", {
        method: "POST",
        headers: {
          "Authorization": "Bearer " + token,
          "Content-Type": "application/json"
        },
        body: JSON.stringify({})
      });

      const result = await response.json();

      if (result.success) {
        console.log("✅ Verified:", result);
        document.getElementById("status").innerText = `✅ Verified for ${result.shop}`;
      } else {
        console.warn("❌ Verification failed:", result.message);
        document.getElementById("status").innerText = `❌ Verification failed: ${result.message}`;
      }
    } catch (err) {
      console.error("❌ Token fetch/verify failed:", err);
      document.getElementById("status").innerText = "❌ Token fetch/verify failed.";
    }
  });
</script>


</body>
</html>

Here it still says " App Bridge failed to load." it is inside shopify admin only. I really stuck don’t know what to do here to qualify this.

6

Hi Richard,

Please check the documentation I linked earlier as you are using a mix of the old and new app bridge, in your examples. This is why your app is not functioning as you expect.

Here is a fully upgraded example for you to try.
I think theres just confusion around using the new CDN only loaded version which adds shopify onto the window and older NPM packages you’ve been trying to use.

<?php
session_set_cookie_params([
    'lifetime' => 0,
    'path' => '/',
    'domain' => 'purchasetheme.com',
    'secure' => true,
    'httponly' => true,
    'samesite' => 'None',
]);
session_start();

if (!isset($_SESSION['shop']) || !isset($_SESSION['host'])) {
    die("Session expired. Please reinstall the app.");
}

$shop = $_SESSION['shop'];
$host = $_SESSION['host'];
?>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Dummy Data Dashboard</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="shopify-api-key" content="f695b1811cb0c61d054d4a3e70f1035c" />
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
</head>

<body>
  <h2>Dummy Data App
    <?php echo $shop;?> =>
    <?php echo $host;?>
  </h2>
  <div id="status">Verifying token...</div>

  <script>
    document.addEventListener("DOMContentLoaded", async function () {
      // Just to show something that app bridge loaded
      shopify.toast.show('Loaded Shopify');

      try {
        // With new App Bridge, the auth token is automatically added
        const response = await fetch("/dummydata/auth/verify_token.php", {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({})
        });

        // check the status code of the response is okay
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        // Continue to check the response body
        const result = await response.json();
        if (result.success) {
          console.log("✅ Verified:", result);
          document.getElementById("status").innerText = `✅ Verified for ${result.shop}`;
        } else {
          console.warn("❌ Verification failed:", result.message);
          document.getElementById("status").innerText = `❌ Verification failed: ${result.message}`;
        }
      } catch (err) {
        console.error("❌ Token fetch/verify failed:", err);
        document.getElementById("status").innerText = "❌ Token fetch/verify failed.";
      }
    });
  </script>


</body>

</html>