AppBridgeError INVALID_CONFIG：必须提供主机答案

【问题标题】：AppBridgeError INVALID_CONFIG: host must be providedAppBridgeError INVALID_CONFIG：必须提供主机
【发布时间】：2021-05-19 10:58:28
【问题描述】：

我在尝试完成官方 shopify tutorial about developing shopify app 时遇到错误。

我一直按照教程一步一步地学习，但即便如此，我还是遇到了抛出错误的问题，即我的配置文件由于不包含主机而无效。

我的 _app.js 文件代码如下：

import React from "react";
import App from "next/app";
import Head from "next/head";
import { AppProvider, Frame } from "@shopify/polaris";
import "@shopify/polaris/dist/styles.css";
import translations from "@shopify/polaris/locales/en.json";
import { Provider } from "@shopify/app-bridge-react";
import ClientRouter from "../components/ClientRouter";

class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props;
    const config = {
      apiKey: API_KEY,
      shopOrigin,
      forceRedirect: true,
    };
    console.log(config);
    return (
      <React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider config={config}>
          <ClientRouter />
          <AppProvider i18n={translations}>
            <Frame>
              <Component {...pageProps} />
            </Frame>
          </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}
MyApp.getInitialProps = async ({ ctx }) => {
  return {
    shopOrigin: ctx.query.shop,
  };
};
export default MyApp;

配置文件的控制台提供了正确的 shopOrigin。如果有人提供帮助，我将不胜感激

【问题讨论】：

标签： shopify-app shopify-api-node

【解决方案1】：

目前需要使用 App Bridge 版本 2，就像应用审核团队指出的那样：

确保您的应用位于 Shopify App Bridge 版本 2.0 上以进行嵌入您在商家管理中的应用...

所以，我所做的是将商店名称（例如：toys.myshopify.com）保存在我的数据库中，编码为 base64 并在需要时发送类似 "host" 查询参数。

const host = Buffer.from(`${shop}/admin`).toString('base64');
ctx.redirect(`${process.env.HOST}?shop=${shop}&host=${host}`);

请注意我是如何在商店值后添加“/admin”的，这是重要的一步，否则会出现 404 错误（找不到页面）。

【讨论】：

【解决方案2】：

所以我能够通过更改应用程序桥的版本来解决问题，我使用的是我认为有错误或无法配置的最新版本，

"@shopify/app-bridge-react": "^2.0.2" [NOT WORKING]
   "@shopify/app-bridge-react": "^1.30.0"   [CURRENT WORKING]

【讨论】：