Shopify应用程序使用React + Node抛出错误

Question

我正在使用React + Node创建Shopify应用程序，但它抛出错误为:

未捕获错误:元素类型无效:期望是字符串(对于内置组件)或类/函数(对于组合组件)，但得到的是:object。

我不知道为什么会这样。如有任何建议，我将不胜感激。提前谢谢。

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，可能返回null

我建议将host添加到环境变量中，并像

那样使用它

host: process.env.host