Shopify App using React + Node throwing error - reactjs

Question

i'm creating a app in Shopify using React + Node but it is throwing error as :
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
I don't know why this is happening. Any suggestions would be much appreciated. Thanks in advance.
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

I think it's this line
host: new URL(location).searchParams.get("host"),
which might return null if host not found
I recommend adding the host to env variables and use it like
host: process.env.host