Remix Cloudflare Pages - Your worker called response.clone()

[shripadk]

What version of Remix are you using?

Remix 1.16.1 and Wrangler version 3.0.1

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Setup project using Remix Cloudflare Pages Template

Then upgrade Wrangler package from 2.7.0 to 3.0.1

Expected Behavior

Should not log any warnings to the console

Actual Behavior

When using wrangler (powered by Miniflare and workerd), I get the following warning logged to the console when executing any actions:

Your worker called response.clone(), but did not read the body of both clones.
This is wasteful, as it forces the system to buffer the entire response body in 
memory, rather than streaming it through.

This may cause your worker to be unexpectedly terminated for going over
the memory limit. If you only meant to copy the response headers and
metadata (e.g. in order to be able to modify them), use 
`new Response(response.body, response)` instead.

Could track it down to this section of the code:

remix/packages/remix-cloudflare-pages/worker.ts

Lines 57 to 60 in 880ab96

	response = await context.env.ASSETS.fetch(
	context.request.url,
	context.request.clone()
	);

Should be replaced with

response = await context.env.ASSETS.fetch( 
 context.request.url, 
 new Response(response.body, response) 
); 

[pmbanugo]

The cause could also be because of the workers-sdk pages-asset-server. There are two calls to response.clone() which matches the two warning logs I get when a form submission happens.

• https://github.com/cloudflare/workers-sdk/blob/main/packages/pages-shared/asset-server/handler.ts#L340
• https://github.com/cloudflare/workers-sdk/blob/9d8509e08acf082604ca896b4ab9ad5c05ae7505/packages/pages-shared/asset-server/handler.ts#L518

Wrangler 2 didn't use workerd by default. Wrangler 3 made workerd the default runtime and this warning is in the workerd code when you do request.clone or response.clone() without reading the body of the cloned object.

[patdx]

I realized the suggested workaround above is passing a Response object to ASSETS.fetch(), which feels weird to me. I feel like we should strive to pass a Request object to ASSETS.fetch() instead. I think the Request object would do a better job of preserving important request info like the HTTP method, such as HEAD/GET/OPTIONS, which may affect how ASSETS.fetch() responds?

I've only tested in local wrangler dev mode so far, but the following seems to working for different incoming requests without showing the request.clone() error message:

const isGetOrHead = ['GET', 'HEAD'].includes(
  context.request.method.toUpperCase(),
);

const requestInit: RequestInit = isGetOrHead
  ? {}
  : {
      body: '',
    };

response = await context.env.ASSETS.fetch(
  new Request(context.request, requestInit),
);

Basically I am wrapping the original request with a new request that just has one difference. The original body is overridden with a fake body empty string "". I'm not exactly sure how ASSETS.fetch() handles POST requests and so on but I'm pretty sure it doesn't actually matter what the body is.

As defined in the Request specification:

35. If either init["body"] exists and is non-null or inputBody is non-null, and request’s method is GET or HEAD, then throw a TypeError.

This approach causes a TypeError when the request is GET or HEAD. So I made sure to check the method type before overriding the body or not. As far as I can tell this seems to have fixed that error.

Still testing it out but wanted to share the snippet in case it could be helpful!

---

Update: I tried the code above deployed to cloudflare pages which still worked. But I realized that I just get "method not allowed" error back for any method that is not GET or HEAD. Lo and behold the pages asset handler has this behavior specifically defined. So an even simpler way to resolve the issue might be to just check the http method and only call ASSETS.fetch() for GET/HEAD requests, which by definition should always have body=null and not be as risk of body getting used.