Error on shopifyApp({...}) cors method from the API Server

Extensions
1

Hi Everyone,

I’ve been trying to create a Post Purchase Extension from Shopify React Router template and been following this guide on Build a post-purchase product offer checkout extension . However, I have been experiencing issue on the Step 4: Update the app server, I believe the cors function is broken and throwing the error below:

[shopify-api/INFO] version 12.1.1, environment React Router 20:43:07 │ React Router │ [shopify-app/INFO] Authenticating checkout request | {shop: null} 20:43:07 │ React Router │ { 20:43:07 │ React Router │ offers: [ 20:43:07 │ React Router │ { 20:43:07 │ React Router │ id: 1, 20:43:07 │ React Router │ title: 'One time offer', 20:43:07 │ React Router │ productTitle: 'The S-Series Snowboard', 20:43:07 │ React Router │ productImageURL: '``https://cdn.shopify.com/s/files/1/0``', 20:43:07 │ React Router │ productDescription: [Array], 20:43:07 │ React Router │ originalPrice: '699.95', 20:43:07 │ React Router │ discountedPrice: '699.95', 20:43:07 │ React Router │ changes: [Array] 20:43:07 │ React Router │ } 20:43:07 │ React Router │ ] 20:43:07 │ React Router │ } 20:43:07 │ React Router │ TypeError: Cannot read properties of undefined (reading 'set') 20:43:07 │ React Router │ at ensureCORSHeaders (file:///Users/username/Documents/Studies/Shopify/shopi fy-shop-app/node_modules/@shopify/src/server/authenticate/helpers/ensure-cors-headers.ts:28:24) 20:43:07 │ React Router │ at action (/Users/username/Documents/Studies/Shopify/shopify-shop-app/app/routes/api.offer.jsx:17:10) 20:43:07 │ React Router │ at callRouteHandler (file:///Users/username/Documents/Studies/Shopify/shopif y-shop-app/node_modules/react-router/dist/development/chunk-JG3XND5A.mjs:506:16) 20:43:07 │ React Router │ at file:///Users/username/Documents/Studies/Shopify/shopify-shop-app/node_mo dules/react-router/dist/development/chunk-UIGDSWPH.mjs:4614:19 20:43:07 │ React Router │ at callLoaderOrAction (file:///Users/username/Documents/Studies/Shopify/shop ify-shop-app/node_modules/react-router/dist/development/chunk-UIGDSWPH.mjs:4666:16) 20:43:07 │ React Router │ at async Promise.all (index 0) 20:43:07 │ React Router │ at defaultDataStrategy (file:///Users/username/Documents/Studies/Shopify/shop ify-shop-app/node_modules/react-router/dist/development/chunk-UIGDSWPH.mjs:4301:17) 20:43:07 │ React Router │ at callDataStrategyImpl (file:///Users/username/Documents/Studies/Shopify/sh opify-shop-app/node_modules/react-router/dist/development/chunk-UIGDSWPH.mjs:4560:17) 20:43:07 │ React Router │ at callDataStrategy (file:///Users/username/Documents/Studies/Shopify/shopif y-shop-app/node_modules/react-router/dist/development/chunk-UIGDSWPH.mjs:3628:19) 20:43:07 │ React Router │ at submit (file:///Users/username/Documents/Studies/Shopify/shopify-shop-app /node_modules/react-router/dist/development/chunk-UIGDSWPH.mjs:3432:21)

From this specific code snippet:

export const action = async ({ request }) => {
  const { cors } = await authenticate.public.checkout(request);

  const offers = getOffers();

  // debug log is working and showing on CLI
  console.log({ offers })

  // this throw TypeError: Cannot read properties of undefined (reading 'set')
  //  at ensureCORSHeaders (file:///Users/username/Documents/Shopify/shopify-shop-app/node_modules/@shopify/src/server/authenticate/helpers/ensure-cors-headers.ts:28:24)
  return cors({ offers });
};

The API call is being executed from the same project on the extensions folder

extend(

  "Checkout::PostPurchase::ShouldRender",

async ({ inputData, storage }) => {

const postPurchaseOffer = await fetch(`https://generated-site.trycloudflare.com/api/offer`, {

method: "POST",

headers: {

Authorization: `Bearer ${inputData.token}`,

"Content-Type": "application/json",

      },

body: JSON.stringify({

referenceId: inputData.initialPurchase.referenceId,

      }),

mode: "cors",

    }).then((response) => response.json());

await storage.update(postPurchaseOffer);


// For local development, always show the post-purchase page

return { render: true };

  },

);

May I ask for assistance or debugging inputs on how to resolve this?

This is my setup:

Operating system

  • Ubuntu 24.04.2 LTS, MacOS Sonoma 14.6.1

CLI version

  • 3.86.1

Shell

  • zsh

Nodejs version

  • v22.21.1

What language and version are you using in your application?

  • Javascript + React

Thank you very much