Shopify App Bridge | ReferenceError: shopify is not defined

Technical Q&A
,

Topic summary

A developer is encountering a “ReferenceError: shopify is not defined” error when deploying their Next.js v12 embedded app to production, despite it working correctly in development.

The Problem:

  • The app loads Shopify App Bridge via CDN in _document.js
  • Works fine locally (using Cloudflare tunnel for public access)
  • Fails in production builds with the reference error
  • Various workarounds attempted (setTimeout delays, try-catch blocks, calling from useEffect/getInitialProps) have not resolved the issue

Proposed Solution:
A respondent suggests the root cause is attempting to use a frontend feature on the backend. They recommend:

  • Using createApp from App Bridge within a useEffect hook on the client side
  • Storing the app instance in React state
  • Ensuring the Shopify App Bridge initialization happens entirely in the frontend context

The discussion remains open as the original poster has not confirmed whether this solution resolved their production deployment issue.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

I’m building an embedded app using Next.js v12 and Shopify App Bridge CDN (https://cdn.shopify.com/shopifycloud/app-bridge.js). I load the CDN script on the _document.js file, and I’m trying to get the shopify global variable by calling a function like this:

const getShopifyData = async () => {
  const shopifyData = await shopify
  return shopify
}

I’m able to get the data if I test it using dev environment and make my localhost public by using Cloudflare tunnel. But as soon as I build & set it to production, the code never works and always returning the “ReferenceError: shopify is not defined” error. I have tried some workaround like adding try catch, add some delay / setTimeout before calling the code, also tried to call it from getInitialProps / useEffect. But still not able to make it works. Does anyone have a suggestion for this issue I’m facing?

Thank you in advance.

1 Like
2

You try to use frontend feature in backend. Instead of this you must use it in frontend.

const [ app, setApp ] = useState<ClientApplication | null>(null);

useEffect(() => {
  const appObject = createApp({
    apiKey: shopify.config.apiKey,
    host: shopify.config.host || ''
  });
  setApp(appObject);
}, []);



useEffect(() => {
if(app) {
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.REMOTE, '/');
}
}, [app])