Host did not expose RPC - App Bridge React with Remix template using Modal, bug

[miguel-angel]

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/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:

[abhishekgarg224]

Hey Miguel, 

I was going through similar problem and looked into all the docs but couldn't find a straightforward answer and used the 

@Shopify/app-bridge-react  as you have. But the solution was pretty simple at the end.

Firstly you need to remove the Provider from the app.tsx file and also the package completely. We will use the Shopify global object. 

You can directly call shopify.modal.show(modalID) or .hide(modalID) inside any file as you are using the remix Shopify app package and it should work. Just reference the Id of the modal as shown below.

<ui-modal id="my-modal">
   <p>Message</p>
      <ui-title-bar title="Title">
         <button variant="primary">Launch</button>
         <button onClick={() => shopify.modal.hide("my-modal")}>Close</button>
      </ui-title-bar>
 </ui-modal>
 <Button variant="primary" onClick={() => shopify.modal.show("my-modal")}>Label</Button>​

You can follow the current discussion happening on the modal issue here as well - https://github.com/Shopify/polaris/issues/11460

Let me know if you still have any problems regarding the same. 

Thanks. 
Abhishek

[miguel-angel]

Hi @abhishekgarg224 

Thank you for the reply!

We first tried this approach with the new <ui-modal> version of the App Bridge, I should've mention this in the post, my bad.
This new component doesn't work for us because we need React within it and it does not support it.

The issue you linked is about the Polaris <Modal> component, and my post talks about the App Bridge React <Modal> component, which is not depecrated, it's just a different version of App Bridge!

[abhishekgarg224]

Gotchya, forgot about that, apologies for not being of much help. I faced the same issue and reverted back to the Deprecated Polaris Modal for now. Tried everything and the Host Did Not Expose RPC error would not go away so I had no choice but to pivot.

Waiting on the new React Modal wrapper from the Shopify team. Really hope they streamline the AppBridge stuff soon. 

Please let me know if you find a solution to this, would be great for UX if I can use the AppBridge Modal. 

[abhishekgarg224]

One thing I can confirm is that the Modal error isn't showing on the Shopify App Node template. So its a Remix only issue.

[Tester5]

Hello,

Please see I have used ui-modal > latest app bridge SDK & how 'message' looks by default in modal popup.

FYI: Our app used bootstrap css & app bridge and earlier it's working perfectly with app bridge v3.

Screenshot >

Even I have tried to set padding to display message in center of content area but still it fails.

> Please guide me how to fix it ASAP.