App Bridge React 4: remove <Provider>; configure via app-bridge.js + <meta name="shopify-api-key"> #11
Description
Area
app-bridge-react
Why this matters
Why: v4 removes the React Provider; configuration moves to a script tag + meta api key. This is often the first blocker when upgrading. (Shopify)
Before (code/config)
import {Provider} from '@shopify/app-bridge-react';
<Provider config={config}>
<App/>
</Provider>After (code/config)
<head>
<meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
</head>
// No Provider needed in v4
<App/>Detection strategy
- Any import of
Providerfrom@shopify/app-bridge-reactor JSX usage of<Provider ...>. - Missing
app-bridge.js+shopify-api-keyin HTML/template.
Edge cases & caveats
- Multi-entry apps may need the script/meta in every HTML shell.
- Server-rendered shells must ensure the meta tag is present.
Authoritative reference URL
https://shopify.dev/docs/api/app-bridge/migration-guide#step-1-add-the-app-bridgejs-script-tag and https://shopify.dev/docs/api/app-bridge/migration-guide#step-3-remove-the-provider-setup (Shopify)