[shopify-app-remix] Form submissions redirects broken in proxied remix app

[vanceism7]

Issue summary

Before opening this issue, I have:

• Upgraded to the latest version of the relevant packages
  • @shopify/* package and version:
  • Node version: v20.11.0
  • Operating system: Windows 10
• Found a reliable way to reproduce the problem that indicates it's a problem with the package
• Looked for similar issues in this repository

---

I'm working on a shopify remix app, which is using the shopify proxy on the store front side of things to add some additional functionality. In my work, I think I've discovered that form submission actions seem to be broken because of the proxy url rewrites.

Here's my minimal reproduction

export async function loader({ request }: LoaderFunctionArgs) {
  return json({ appUrl: process.env.SHOPIFY_APP_URL });
}

const FooPage = () => {
  const { appUrl } = useLoaderData<typeof loader>();
  
  return (
    <AppProxyProvider appUrl={appUrl}>
      <main>
        // You can also use plain `Form` here, the result is the same
        <AppProxyForm action="/apps/proxy/foo" method="post">
          <button type="submit">Click me</button>
        </AppProxyForm>
      </main>
    </AppProxyProvider>
  );
};

export default FooPage;

export async function action({ request }: ActionFunctionArgs) {
  return null;
  // or return redirect("/")
  // Really you can return anything here, the result is the same
}

Expected behavior

• If I'm returning null, I expect the page to remain unchanged
• If I'm returning redirect("/") - I expect the page to go back to my store front url, e.g: foo.myshopify.com
• If I return redirect("/apps/proxy/foo") - I expect the page to redirect to foo.myshopify.com/apps/proxy/foo - i.e: the url should be unchanged

Actual behavior

In all of the above expected scenarios, instead of the page remaining unchanged or redirecting properly, the store url always gets rewritten to the url of my actual app.

E.g: (If my app url is myapp.com)

• returning null redirects me to myapp.com/apps/proxy/foo (the url is unchanged except foo.myshopify.com becomes myapp.com)
• returning redirect("/") redirects me to myapp.com instead of foo.myshopify.com
• returning redirect("/apps/proxy/foo") redirects me to myapp.com/apps/proxy/foo instead of foo.myshopify.com/apps/proxy/foo

Other notes

This issue seems to specifically happen with form submission actions.

For example, the following loader function works as expected

export const loader: LoaderFunction = async () => {
  return redirect("/")
};

This function will successfully redirect me to foo.myshopify.com.

Also, if I call the action function manually using a fetch call, this also gets back the response fine without any redirection.

But any call within the context of a form submission redirects away from the shopify store over to my app's direct url. This is specifically a big issue when using libs like conform, which use the form action to run validation on the server side, causing the form to break immediately on tabbing from one form input to another

[matteodepalo]

Hi @vanceism7, thank you for opening this issue, the team will take a look.

[Xmaster6y]

Seconding this. To complement:

• I observe the same behaviour with the AppProxyLink component
• The routing works fine with the loader and action only, e.g. by throwing liquid responses containing a similar form or link.
• The form and link components are not properly integrated into the theme (from the docs idk if it's expected)

[anasdevv]

Any progress with the findings? This really gives me headaches..

[github-actions]

We're labeling this issue as stale because there hasn't been any activity on it for 60 days. While the issue will stay open and we hope to resolve it, this helps us prioritize community requests.

You can add a comment to remove the label if it's still relevant, and we can re-evaluate it.