Shopify App Bridge not working in react app

[Mayank]

I have created a react app for shopify admin and want to use shopify's style system. For that I have installed the latest versions of "@shopify/polaris" and "@Shopify/app-bridge-react" and followed the steps provided for setup. The polaris library is working fine but app-bridge is giving me problems.

For app bridge setup:

1. I have installed 

"@shopify/app-bridge-react": "^4.1.3"

2. Added this script in the head of my index.html:

<meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

But when I import and use anything from @Shopify/app-bridge-react it doesn't work and gives me this error:

Uncaught Error: App Bridge Next: missing required configuration fields: shop
    at app-bridge.js:1:44135
    at app-bridge.js:1:44212
    at app-bridge.js:1:44242
    at app-bridge.js:1:53002
    at app-bridge.js:1:60155

Can anyone please help me resolve this issue ?

[junejuly1]

Same here, using vite

[ohtasoji]

same issue with vite, did you ever figure this out?

[iffikhan30]

Hello Found this solution you can add like this

<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js?apiKey=<--API_KEY_-->"></script>

[Mazz]

I still have the same issue.

<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js?apiKey=<--API_KEY_-->"></script>

Did not work for me.
I added the shop URL to the query params to fix the issue.

[iffikhan30]

share some more detail about your app

which platform you created

where your application deploy
and more...

[jam_chan]

The Same. Using Vite too. Why does the App Bridge doc not mention the shop parameter is required?

[Hemal]

Hi Mayank & All,

To resolve this issue, you will need to include the following meta tags in your HTML, specifying the `shop` and `api-key` as shown below:

<!-- Shopify App Bridge [START] -->

<meta name="shopify-api-key" content="SHOPIFY_API_KEY" />

<meta name="shopify-shop" content="shop.myshopify.com" />

<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

<!-- Shopify App Bridge [END] -->

All the best.

[eriksmiks]

This worked! Thank you so much! Spent full day and 50+ tries to get the app bridge working. Whatever the app bridge next is there is no documentation online besides couple sentences. Did not help that I had not configured correct domain in my shopify.app.toml nad it kept resetting the urls input through app settings in partner dashboard.