Shopify Embedded App Bridge Does NOT work

Technical Q&A
1

Hi, I have an embedded app 58128990209, and I have turned on its embedded option in app configuration.

The app has been successfully embedded in Shopify Admin console, but the App Bridge doesn’t work for me. When I access the react hook of useAppBridge, I can console the config as (don’t worry about data leak, it’s a test app):

  1. apiKey: “e81f321eaf4ca36c21090d47f695c86e”
  2. host: “YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvZGRkZHRlc3RkZGRkdGVzdA”
  3. locale: “en-US”
  4. shop: “ddddtestddddtest.myshopify.com”

Not sure what’s wrong with this Shopify hook, but Shopify nav-menu, and Toast doesn’t give me any result.

I have this script added to my root:

And AppBridge react code:

const shopify = useAppBridge();
console.log(110, shopify);

root.render(
<React.StrictMode>

Home
Templates
Settings




</React.StrictMode >
);

shopify.toast.show(‘Test success’);

Is that possible the host string is incorrect ? How to debug this. Thank you so much !

2

Ensure that the App Bridge is correctly set up before trying to use it.

import { AppProvider } from '@shopify/app-bridge-react';
import { BrowserRouter as Router } from 'react-router-dom';

const config = {
  apiKey: 'e81f321eaf4ca36c21090d47f695c86e',
  host: new URLSearchParams(window.location.search).get('host'),
  forceRedirect: true,
};

root.render(
  
);

App Bridge is imported correctly:

import { useAppBridge } from '@shopify/app-bridge-react';
import { Toast } from '@shopify/app-bridge/actions';

const MyComponent = () => {
  const app = useAppBridge();

  useEffect(() => {
    const toast = Toast.create(app, { message: 'Test success' });
    toast.dispatch(Toast.Action.SHOW);
  }, [app]);

  return My Component
;
};

export default MyComponent;
3

Thanks for your response. It seems your solution is identical to my code. I am using the latest version https://shopify.dev/docs/api/app-bridge-library#react so you no longer need to declare provider. as long as you add:

And I see the Shop and Host parameter are passed in as query params correctly.

However, I still have trouble call the app bridge, even after I console.log the appBridge object successfully

Any other hints are highly appreciated !

1 Like
4

Hi @yinghechen have you solved this issue? I have the rerouting issue when upgrading to the shopify app bridge react 4 too