TypeError: Can't modify immutable headers. in handleDataRequestRR (Cloudflare Pages)

[ilyasotkov]

Reproduction

Go to https://github.com/ilyasotkov/polished-truth-b001, open in Codespaces or local devcontainer, follow the steps in README.

This pull request #6783 is the culprit, present since 1.19.0, worked fine before that. The error seems quite baffling to me because the code below is so basic, I can't imagine any useful Remix app not doing something like this. Am I missing something here? Any workarounds?

import { Form } from '@remix-run/react';

export const loader = async () => {
  const r = new Request(`https://httpbin.org/get`);
  return await fetch(r);
};

export const action = async () => {
  return null;
};

export default function ButtonForm() {
  return (
    <div>
      <Form method="post">
        <button type="submit">Send Request</button>
      </Form>
    </div>
  );
}

System Info

System:
    OS: Linux 6.2 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (2) x64 AMD EPYC 7763 64-Core Processor
    Memory: 5.77 GB / 7.74 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 18.20.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.5.0 - /usr/local/bin/npm
  npmPackages:
    @remix-run/cloudflare: ^2.8.1 => 2.8.1 
    @remix-run/cloudflare-pages: ^2.8.1 => 2.8.1 
    @remix-run/dev: ^2.8.1 => 2.8.1 
    @remix-run/react: ^2.8.1 => 2.8.1 
    vite: ^5.1.0 => 5.2.8 

### Used Package Manager

npm

### Expected Behavior

No error on button press.

### Actual Behavior

✘ [ERROR] TypeError: Can't modify immutable headers.

      at handleDataRequestRR
  (file:///projects/apps/polished-truth-b001/node_modules/@remix-run/server-runtime/dist/server.js:158:22)
      at async requestHandler
  (file:///projects/apps/polished-truth-b001/node_modules/@remix-run/server-runtime/dist/server.js:94:18)
      at async handleFetch
  (file:///projects/apps/polished-truth-b001/node_modules/@remix-run/cloudflare-pages/dist/esm/worker.js:75:18)
      at null.<anonymous> (async
  file:///projects/apps/polished-truth-b001/.wrangler/tmp/dev-CQLC77/functionsWorker-0.8639886703431474.js:6055:14)
      at async next
  (file:///projects/apps/polished-truth-b001/node_modules/wrangler/templates/pages-template-worker.ts:161:22)
      at async Object.fetch
  (file:///projects/apps/polished-truth-b001/node_modules/wrangler/templates/pages-template-worker.ts:180:11)
      at async jsonError
  (file:///projects/apps/polished-truth-b001/node_modules/wrangler/templates/middleware/middleware-miniflare3-json-error.ts:22:10)
      at async drainBody
  (file:///projects/apps/polished-truth-b001/node_modules/wrangler/templates/middleware/middleware-ensure-req-body-drained.ts:5:10)
      at async jsonError
  (file:///projects/apps/polished-truth-b001/node_modules/wrangler/templates/middleware/middleware-miniflare3-json-error.ts:22:10)
      at async drainBody
  (file:///projects/apps/polished-truth-b001/node_modules/wrangler/templates/middleware/middleware-ensure-req-body-drained.ts:5:10)


[wrangler:inf] GET / 500 Internal Server Error (136ms)

[arjunyel]

@ilyasotkov this will probably fix it for you https://github.com/remix-run/remix/pull/8722/files

[ilyasotkov]

@arjunyel I just checked, and it doesn't fix it. Also I don't see how the changes in your PR are anyhow related to the PR that introduced the issue: #6783.

This issue is about HMR returning 500 because workerd is throwing Can't modify immutable headers. I can work around it (with significant UX regression) by doing this

- <Form method="post">
+ <Form method="post" reloadDocument>