App-Bridge loading correctly - But none of the functions work

App Bridge
1

So I have an embedded app that loads app-bridge using plain JS(No NPM or Node used). I’m aware this is not the recommended way, but we’re stuck with this and it should work still.

I can load app-bridge, and create an app. the app-bridge objects contain the relevant structures. There are no errors or console warnings at all. But whenever I try to call an app-bridge function I get no response, or nothing happens. Something is wrong with the link to app-bridge, but I cannot figure out what it is.

I’m loading the packages using unpkg :

<script src="https://unpkg.com/@shopify/app-bridge"></script>
<script src="https://unpkg.com/@shopify/app-bridge-utils"></script>

And then creating my app :

const shopifyApp = window[“app-bridge”];
let createApp = shopifyApp.default;
const app = createApp({
apiKey: “XXXX”,
host: “XXXX”
});

If I log the app variable it shows correctly :

console.log(“App Bridge Initialized:”, app);

image
image654×185 10.5 KB

Then I try to call a simple Toast command to test :

const toast = Toast.create(app, {
message: “App Bridge is working!”,
duration: 5000,
});

toast.dispatch(Toast.Action.SHOW);

No toast appears on the screen. There are no console errors in the browser, and no network errors.

I also try to call getSessionToken, but this eventually causes a timeout :

(async function () {
console.log(“Session token verification started.”);
const token = await getSessionToken(app);
console.log(“Session token loaded”);
})();

I’m a bit at a loss for what to test next?

2

I think you are using the old version of App Bridge.
Please upgrade to the new App Bridge V4 App Bridge

3

Hi Jordan,
Thanks for the reply!

I switched to using the official CDN, which is a little different. The official app bridge page has an example for setting up a basic app, which looks a lot simpler than the version I am using. But none of the examples work.

I set up this bare bones test, but no toast appears and there is no error either :

image
image817×287 28 KB

4

Did you specify a valid app key? And have loaded this as an embedded app in a store? :thinking:

Any errors in your browser console?

1 Like
5

Hi Jordan,
Yes the api key is valid, I am logging the ‘window.shopify’ object and it is loading correctly :

image
image1077×359 35.4 KB

There are no console errors or warnings, and nothing going wrong with the network either, everything looks fine, but no toast :expressionless: I am also getting a warning on the app review page, but I’m not sure if this is related?

image

EDIT Sorry Jordan, missed one of your questions. Yes it is embedded, it shows within the Shopify admin page, and I have enabeled the Embedded app section of the configuration.

image
image600×168 6 KB

6

From the screenshot that doesn’t look like value for an api key. Can you double check that you copied the right value from your app config in the dashboard?

2 Likes
7

Hi Trish,
Thank you for the reply. I may have this wrong, but isn’t the apikey what is returned from the oauth process? Within the app config I only see a Client ID and Secret.

EDIT Just to add to this - I tried replacing the apikey with the client secret, and no difference. But I also tried replacing the apikey with gibberish, and I received no error so I’ve no way of really telling if any of this is working correctly.

8

Ohh god. I asked chatgpt, I was getting desperate…

image

I’m not sure how I was supposed to work that one out?!? It says apikey everywhere, in all the docs, but it’s referring to the clientid. All working now! Just three hours of my life wasted.

9

@JordanFinners @Trish_Ta Thank you for the help! Greatly appreciated pointing me in the right direction.

1 Like