v3_singleFetch breaks the remix redirecting outside of the app to the shopify admin (Handling Response)

[silintzir]

Issue summary

Before opening this issue, I have:

• Upgraded to the latest version of the @shopify packages
  • Affected package and version:

{
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.53.2",
    "express": "^4.21.1",
    "@shopify/admin-api-client": "^1.0.4",
    "@shopify/app-bridge-react": "^4.1.5",
    "@shopify/polaris": "^13.9.1",
    "@shopify/polaris-icons": "^9.3.0",
    "@shopify/shopify-api": "^11.6.0",
    "@shopify/shopify-app-remix": "^3.4.0",
    "@remix-run/dev": "^2.15.0",
    "@remix-run/express": "^2.15.0",
    "@remix-run/node": "^2.15.0",
    "@remix-run/react": "^2.15.0",
    "vite": "^5.4.11"
}

• Node version: 22.11.0
• Package manager: [email protected]
• Operating system: Linux Ubuntu
• Browsers tested: Chrome,Firefox
• Set { logger: { level: LogSeverity.Debug } } in my configuration
• Found a reliable way to reproduce the problem that indicates it's a problem with the package
• Looked for similar issues in this repository
• Checked that this isn't an issue with a Shopify API
  • If it is, please create a post in the Shopify community forums or report it to Shopify Partner Support

v3_signgleFetch future flag of Remix seems to be breaking remix redirection out of the app to the shopify admin. Example is with the the billing.request API call that should redirect to the charge approval page of the shopify admin.

Expected behavior

The merchant clicks on an "Upgrade plan" link that sends him to the "/subscribe" route. The route uses the billing api to request a charge and the merchant is redirected to the Charge approval page of the shopify admin.

Actual behavior

When navigating directly to the /subscribe route from the browser address bar, it functions as it should. If however you have a link within the app that sends the user to the /subscribe route, the process does not run and a "Handling response" message displays on the window.

Steps to reproduce the problem

Add billing configuration to the shopify.server.ts

 const shopify = shopifyApp({
   ...
   billing: {
     'PAID_PLAN': {
       trialDays: 7,
       lineItems: [{ amount: 20, interval: 'ANNUAL', currencyCode: 'USD' }],
     },
   }
 })

Create a route subscribe under routes:

import type { LoaderFunctionArgs } from '@remix-run/node';
import { shopify } from '~/shopify.server';

// substitute with the prefix of the store without the .myshopify.com suffix
const store = 'my-store';
// substitute with the app handle
const app = 'app-handle';
// name of the plan setup in shopify.server.ts
const plan = 'PAID_PLAN';
// annual or monthly interval
const interval = 'ANNUAL';

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { billing } = await shopify.authenticate.admin(request);
  return await billing.request({
    plan,
    lineItems: [],
    isTest: true,
    returnUrl: `https://admin.shopify.com/store/${store}/apps/${app}`,
  });
};

Add a Button using polaris anywhere in the app

<Button url="/subscribe" variant="primary">Buy Plan</Button>

[silintzir]

It seems that for the client side navigations to this route, the new flag requires that the route exports the headers function otherwise the header x-shopify-api-request-failure-reauthorize-url that was set automatically before the v3 flag, now does not get set.

export const headers: HeadersFunction = (headers) => {
  const mergedHeaders = new Headers();
  for (const temp of Object.values(headers)) {
    if (!temp) {
      break;
    }
    temp.forEach((value, key) => {
      mergedHeaders.set(key, value);
    });
  }
  return mergedHeaders;
};

Now, it seems to be working again.

[lizkenyon]

Thanks @silintzir for the update!

I reverted the flag in the template while I was investigating. Yes I was seeing as well the issue is caused because the failure to add the headers. We will be updating the package/template to work with the flag enabled.