[Bug]: Getting params from useSearchParams() instead of page props

[AbhinavRobinson]

I was working on deploying this to Vercel, it builds successfully but something goes wrong after the /exitframe route, the app stops responding inside shopify. (endless loading)

Env Variables

MONGODB_URI=<db>
SHOPIFY_API_KEY=<key>
NEXT_PUBLIC_SHOPIFY_API_KEY=<key>
SHOPIFY_API_SECRET=<secret>
HOST=<vercel-app>
NEXT_PUBLIC_HOST=<vercel-app>
SCOPES=<scopes>

App works fine in dev mode.

PS: Thanks for the awesome repo :)

[AbhinavRobinson]

Turns out app does not like a / at the end of the url in env. But the app still get's stuck at exitiframe.

[AbhinavRobinson]

Updating the exitiframe page fixed this for me, using the useSearchParams() hook

"use client";

import { Redirect } from "@shopify/app-bridge/actions";
import { useAppBridge, Loading } from "@shopify/app-bridge-react";
import { useEffect } from "react";
import { useSearchParams } from "next/navigation";

export default function ExitIframe() {
  const searchParams = useSearchParams();
  const app = useAppBridge();
  useEffect(() => {
    const redirectUri = searchParams.get("redirectUri");
    if (app && redirectUri) {
      const redirect = Redirect.create(app);
      const decodedRedirectUri = decodeURIComponent(redirectUri);
      redirect.dispatch(Redirect.Action.REMOTE, decodedRedirectUri);
    }
  }, [app, searchParams]);

  return <Loading />;
}

[ozzyonfire]

Great thanks - this was left over from when I adapted it from the "pages" router. Good find!