I have been trying to debug this for a longtime but havent been able to find a solution, anyone knows how to fix it ?
Part of the app-bridge components dissapear and stop working when i open a modal. I’m using the remix-template with @Shopify_77 /app-bridge-react this is my modal:
<Modal
src="/app/modal/create_category"
open={openCreateModal}
onClose={() => setOpenCreateModal(false)}
title="Create Addon Category"
/>
with some state to control the opening and closing, and the modal is part of the app’s routing, any ideas?
Here’s what my app.tsx looks like
import type { HeadersFunction, LoaderFunctionArgs } from '@remix-run/node';
import { json } from '@remix-run/node';
import {
Link,
Outlet,
useLoaderData,
useLocation,
useRouteError,
useNavigate,
} from '@remix-run/react';
import { Provider } from '@shopify/app-bridge-react';
import polarisStyles from '@shopify/polaris/build/esm/styles.css';
import { AppProvider } from '@shopify/shopify-app-remix/react';
import { boundary } from '@shopify/shopify-app-remix/server';
import { useMemo } from 'react';
import { authenticate } from '../shopify.server';
export const links = () => [{ rel: 'stylesheet', href: polarisStyles }];
export const loader = async ({ request }: LoaderFunctionArgs) => {
await authenticate.admin(request);
const url = new URL(request.url);
const host = url.searchParams.get('host');
return json({ apiKey: process.env.SHOPIFY_API_KEY || '', host });
};
export default function App() {
const { apiKey, host } = useLoaderData<typeof loader>();
const location = useLocation();
const navigate = useNavigate();
const history = useMemo(
() => ({ replace: (path: string) => navigate(path, { replace: true }) }),
[navigate]
);
const router = useMemo(
() => ({
location,
history,
}),
[location, history]
);
return (
<AppProvider isEmbeddedApp apiKey={apiKey}>
<Provider
config={{
apiKey,
host: host!,
}}
router={router}
>
{location.pathname.includes('modal') || (
<ui-nav-menu>
<Link to="/app">Dashboard</Link>
{process.env.NODE_ENV === 'production' || <Link to="/app/tests">Tests</Link>}
</ui-nav-menu>
)}
<Outlet />
</Provider>
</AppProvider>
);
}
// Shopify needs Remix to catch some thrown responses, so that their headers are included in the response.
export function ErrorBoundary() {
return boundary.error(useRouteError());
}
export const headers: HeadersFunction = (headersArgs) => boundary.headers(headersArgs);
Here’s a video:
