使用React＆＃x2B; Shopify应用程序节点投掷错误

Question

我正在使用React + Node在Shopify中创建一个应用程序，但它的投掷错误是：

未接收错误：元素类型无效：预期字符串（用于内置组件）或类/函数（用于复合组件），但得到：目的。

我不知道为什么会发生这种情况。任何建议都将不胜感激。提前致谢。

homepage.jsx

import {Page} from "@shopify/polaris";

import React, {Component} from 'react';
import { ResourcePicker } from "@shopify/app-bridge/actions";

class HomePage extends Component {

constructor(props) {
super(props);

this.state = {
  open : false,
}
}

render () {
return (
  
  <Page 
    fullWidth
    title='Product Selector' 
    primaryAction={{
      content: 'Select Products',
      onAction: () => this.setState({open: true})
    }}>
      
      <ResourcePicker
        resourceType = 'Product'
        open={true}
      />
      
  </Page>
  
)
}
}

export default HomePage;

app.jsx

import {
  ApolloClient,
  ApolloProvider,
  HttpLink,
  InMemoryCache,
} from "@apollo/client";
import {
  Provider as AppBridgeProvider,
  useAppBridge,
} from "@shopify/app-bridge-react";
import { authenticatedFetch } from "@shopify/app-bridge-utils";
import { Redirect } from "@shopify/app-bridge/actions";
import { AppProvider as PolarisProvider } from "@shopify/polaris";
import translations from "@shopify/polaris/locales/en.json";
import "@shopify/polaris/build/esm/styles.css";

import HomePage from "./components/HomePage";

export default function App() {
  return (
    <PolarisProvider i18n={translations}>
      <AppBridgeProvider
        config={{
          apiKey: process.env.SHOPIFY_API_KEY,
          host: new URL(location).searchParams.get("host"),
          forceRedirect: true,
        }}
      >
        <MyProvider>
          <HomePage />
        </MyProvider>
      </AppBridgeProvider>
    </PolarisProvider>
  );
}

function MyProvider({ children }) {
  const app = useAppBridge();

  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
      credentials: "include",
      fetch: userLoggedInFetch(app),
    }),
  });

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
}

export function userLoggedInFetch(app) {
  const fetchFunction = authenticatedFetch(app);

  return async (uri, options) => {
    const response = await fetchFunction(uri, options);

    if (
      response.headers.get("X-Shopify-API-Request-Failure-Reauthorize") === "1"
    ) {
      const authUrlHeader = response.headers.get(
        "X-Shopify-API-Request-Failure-Reauthorize-Url"
      );

      const redirect = Redirect.create(app);
      redirect.dispatch(Redirect.Action.APP, authUrlHeader || `/auth`);
      return null;
    }

    return response;
  };
}

Answer 1

我认为，

host: new URL(location).searchParams.get("host"),

如果找不到host找不到host

我建议将host添加到env变量并将其像使用一样

host: process.env.host