Loading app-bridge-react fail

36 2 1

Follow the doc for Loading component I get the follow error


ReferenceError: isTheAppLoading is not defined


import App from 'next/app';
import Head from 'next/head';
import { AppProvider } from '@shopify/polaris';
import { Provider, Loading } from '@shopify/app-bridge-react';
import Cookies from "js-cookie";
import '@shopify/polaris/styles.css';
import translations from '@shopify/polaris/locales/en.json';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';

const client = new ApolloClient({
  fetchOptions: {
    credentials: 'include',

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const config = { apiKey: API_KEY, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: false };
    const loading = isTheAppLoading();
    const loadingComponent = loading ? <Loading /> : null;
    return (
          <title>Sample App</title>
          <meta charSet="utf-8" />
        <Provider config={config}>
          <AppProvider i18n={translations}>
            <ApolloProvider client={client}>
              <Component {...pageProps} />

export default MyApp;

Any idea or I have to write that function myself instead of using what have in package?

Shopify Staff
Shopify Staff
17 5 3

This is an accepted solution.

Hey tokito,


I'm apologize that you're running into issues while following our documentation.


The function in question is an example function, not one that we provide with App Bridge React.  You'll have to define a function or determine if the app is loading or not based off of state in your application. I'm sorry about the confusion.


That function could be defined in your `MyApp` class.

class MyApp extends App {
    isTheAppLoading() {
        return true; // return a boolean based off of your apps state.
Andrew Apperley
(App Bridge) Mobile Developer