Shopify App Bridge not working in react app

Technical Q&A
1

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_77 /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"
  1. 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_77 /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 ?

6 Likes
2

Same here, using vite

1 Like
3

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

4

Hello Found this solution you can add like this

5

I still have the same issue.

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

6

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

7

share some more detail about your app

which platform you created

where your application deploy
and more…

8

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:

All the best.

2 Likes
9

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.