Error when upgrading Remix, Response.json is not a function

Shopify CLI and Libraries
1

Before deploying my app, I updated Remix to version 2.13.1, when I did it, I had deprecated on the json response provided by Remix:

This utility is deprecated in favor of opting into Single Fetch via future. v3_singleFetch and returning raw objects. This method will be removed in React Router v7. If you need to return a JSON Response, you can use Response. json().

So I used Response.json() in my code, it works without issues when I use shopify app dev, all my code works.
But when I deployed my app on my cluster, and built it, I have this error when I want to try my app in dev mode:

[shopify-api/INFO] Creating new session | {shop: quickstart-XXXXX.myshopify.com, isOnline: false}
TypeError: Response.json is not a function
    at loader (file:///app/build/server/index.js?t=1732184518000:4154:19)
    at Object.callRouteLoader (/app/node_modules/@remix-run/server-runtime/dist/data.js:59:16)
    at /app/node_modules/@remix-run/router/router.ts:4899:19
    at callLoaderOrAction (/app/node_modules/@remix-run/router/router.ts:4963:16)
    at async Promise.all (index 0)
    at defaultDataStrategy (/app/node_modules/@remix-run/router/router.ts:4772:17)
    at callDataStrategyImpl (/app/node_modules/@remix-run/router/router.ts:4835:17)
    at callDataStrategy (/app/node_modules/@remix-run/router/router.ts:3992:19)
    at loadRouteData (/app/node_modules/@remix-run/router/router.ts:3937:19)
    at queryImpl (/app/node_modules/@remix-run/router/router.ts:3696:20)

The code from index.js is:

const loader = async ({ request }) => {
  await authenticate.admin(request);
  const user = await getAuthenticatedUser();
  return Response.json({
    apiKey: process.env.SHOPIFY_API_KEY || "",
    authenticatedUser: user
  });
};

Can I use Response.json already ? Or should I wait ? Why the embedded app doesn’t work but the dev version yes ?
Thanks

3

Hi @Vincent_Decaux, what version of node are you using in your cluster?
It seems like if you enable the v3_singleFetch feature flag you can remove json entirely. Have you tried doing that? Future Flags (v2.13.1) | Remix

4

I tried to upgrade to Node 22 alpine, but same error as the Node 20 installed by default.

But yes, I see, thanks for the link to documentation, I will upgrade to this flag.

5

I faced the same error when returning Response.json(…) in the loader. I’m using the image 20.18.0-alpine in the container (production) and node 20.18.0 in my local machine. The weird part is that this works well in my machine, but fails in docker. I solved it using the function data (import { data } from ‘@remix-run/node’) and it works well.

Like in the example:

-import { json } from "@remix-run/node";
+import { data } from "@remix-run/node";

export async function loader({}: LoaderFunctionArgs) {
  let tasks = await fetchTasks();
-  return json(tasks, {
+  return data(tasks, {
    headers: {
      "Cache-Control": "public, max-age=604800"
    }
  });
}
1 Like
6

I had the same issue. Just confirming for others.
Without the v3_singlefetch future flag, Response.json() worked in local but broke on production docker container.

After adding the future flag, it worked in production.

If you change from the depreciated json() util to Response.json(), the v3_singlefetch future flag is required at least until Remix updates to React Router v7.