Solved

Loading app-bridge-react fail

tokito
Shopify Partner
38 2 2

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 (
      <React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider config={config}>
        {loadingComponent}
          <AppProvider i18n={translations}>
            <ApolloProvider client={client}>
              <Component {...pageProps} />
            </ApolloProvider>
          </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}

export default MyApp;

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

Accepted Solution (1)

andrew-apperley
Shopify Staff (Retired)
21 5 4

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.
    }
...
}

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Replies 2 (2)

andrew-apperley
Shopify Staff (Retired)
21 5 4

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.
    }
...
}

To learn more visit the Shopify Help Center or the Community Blog.

juleshaydn
New Member
4 0 0

This still returns the following error for me. (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 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 {
  isTheAppLoading() {
    return true;
  }
  render() {
    const { Component, pageProps } = this.props;
    const loading = isTheAppLoading();
    const loadingComponent = loading ? <Loading /> : null;
    return (
      <React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider
          config={{
            apiKey: API_KEY,
            shopOrigin: shopOrigin,
            forceRedirect: true,
          }}
        >
          {loadingComponent}
          <AppProvider i18n={translations}>
            <ApolloProvider client={client}>
              <Component {...pageProps} />
            </ApolloProvider>
          </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}

export default MyApp;