TypeError: history.dispatch is not a function

Highlighted

I'm following the tutorial about migrating from the legacy Embedded App SDK to App Bridge

The code snippet for Keeping the frame URL in sync using the ES5/CDN-hosted version:

 

var AppBridge = window['app-bridge'];
var createApp = AppBridge.default;
var actions = AppBridge.actions;
var History = actions.History;

function initializeApp() {
  var app = createApp({
    apiKey: 'API key from Shopify Partner Dashboard',
    shopOrigin: shopOrigin
  });

  var history = History.create(app);
  history.dispatch(History.Action.PUSH, window.location.pathname);

  return app;
}

 

throws an error:

 

TypeError: history.dispatch is not a function

 

I've already found a workaround in another thread, but I wasted over an hour trying to figure out why is it now working.

 

The workaround is to call dispatch chained with History.create:

 

var History = actions.History;
History.create(app).dispatch(History.Action.PUSH, '/settings');

Could you please fix the bug or at least update the tutorial with a working code snippet? It will help other developers.

 

 

I'm a software engineer. I make things happen automatically.
0 Likes
Highlighted
Shopify Staff
Shopify Staff
46 8 13

Hi Lukasz, so sorry to hear that you had to spend additional time finding the workaround. Thank you for bringing this to our attention, this issue is currently being looked at 🙏Could you kindly share the link to the thread with the workaround? Edit: Also, do you know which version of App Bridge is your app consuming through CDN?

0 Likes
Highlighted

Hi @hannachen,

 

I found the workaround here https://community.shopify.com/c/Shopify-APIs-SDKs/Shopify-App-Bridge-only-intermittently-passes-GET-...

 

My app is using App Bridge version 1.16.0 from this location: 

I guess it's the latest one, right? 

 

Thanks,
Lukasz

I'm a software engineer. I make things happen automatically.
0 Likes
Highlighted
Shopify Staff
Shopify Staff
46 8 13

Thanks @LukaszWiktor,

 

Yep, that is the latest release. I'm attempting to reproduce the issue on my end, and I was having trouble with it until now. Could you kindly confirm if the CDN version of App Bridge is loaded asynchronously in your app, similar to something like this?

 

<script src="https://unpkg.com/@shopify/app-bridge@1" async></script>
0 Likes
Highlighted

It's being loaded like this:

 

<script src="https://unpkg.com/@shopify/app-bridge@1.16.0/umd/index.js"></script>

so not asynchronously. I'm testing it in Chrome v80:

 

image.png

I'm a software engineer. I make things happen automatically.
0 Likes