Why is src driven modal such a pain?

App Bridge
,
1

Hi,
I’m trying to use src feature of modal coming from @shopify/app-bridge-react.
The framework I use is remix.run with the original template from Shopify.

And i’m being under so much none-logical problems that i don’t even understand.

  1. If you create the page that gonna be rendered in your modal under the /app path; the modal will include the navmenu (from /routes/app.tsx) of your app: the one integrated in the shopify admin, just whiteout any styles.

  2. You gonna have to re-declare: AppProvider, PolarisAppProvider such as:

import { AppProvider as PolarisAppProvider } from "@shopify/polaris";    
import { AppProvider } from "@shopify/shopify-app-remix/react";

export async function loader({ request }: LoaderFunctionArgs) {
  return {
    apiKey: process.env.SHOPIFY_API_KEY || "",
  }
}

export default function MyModelSrc{
  const { apiKey } = useLoaderData<typeof loader>();
  return (
    <AppProvider isEmbeddedApp apiKey={loaderData.apiKey}>
      <PolarisAppProvider i18n={polarisTranslations}>
         ...
      </PolarisAppProvider>
    </AppProvider>
  )
}

You have to do this because the only way to get rid of the nav-menu is to create the modal file starting with: app_.XXXXX.
Because “_” at the end remove the app layout from the route.

  1. and this is not finished… you also have to manually import polaris styles:
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
export const links = () => [{ rel: "stylesheet", href: polarisStyles }];

I mean why is this so complicated to make ?
This feature is so nice because it also a modal that have it’s own loader and action file.
But it’s such a pain to make it works.