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>

[pkpjpm]

I've created a simple test project that reproduces this error in the context of error handling: it used to be possible to throw a Response object out of a loader or action function and have that response be represented in the output of useRouteError. Now, it seems that the handleDataRequest function is introducing an error because it is calling headers.set on a header collection with an immutable guard. This generates the "Can't modify immutable headers" error, which pollutes the error handling. We're currently working around this problem by re-building Response objects without headers before we throw them, but it would be helpful to have the root cause corrected.

Here's sample output from the test project:

at _Headers.set (node:internal/deps/undici/undici:2166:17)
    at handleDataRequest (/Users/pkch/sandbox/remix_action_defect/my-remix-app/node_modules/@remix-run/server-runtime/dist/server.js:182:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async requestHandler (/Users/pkch/sandbox/remix_action_defect/my-remix-app/node_modules/@remix-run/server-runtime/dist/server.js:100:18)
    at async nodeHandler (/Users/pkch/sandbox/remix_action_defect/my-remix-app/node_modules/@remix-run/dev/dist/vite/plugin.js:841:27)
    at async /Users/pkch/sandbox/remix_action_defect/my-remix-app/node_modules/@remix-run/dev/dist/vite/plugin.js:844:15

[myfrontpocket]

Thank you for this issue. I ran into this some time ago after upgrading Remix and thought maybe I was wrong. I was reproducing this in basically the same way, which I don't see as being "bad." I was going to end up doing something like cloning the response or just building and returning a new one to avoid it. Hopefully this gets fixed

[myfrontpocket]

#9693 (comment)

[brophdawg11]

This is a duplicate of #9691 and should be resolved in Remix 2.10.2 via #9693. Please let us know if not!

[pkpjpm]

This is a duplicate of #9691 and should be resolved in Remix 2.10.2 via #9693. Please let us know if not!

I've updated my error handling repeatable case to 2.10.2 and the problems seems to still be present. I realize the context of this example is different than the specifics of this issue, and I would be happy to open a separate issue if that would be helpful.

[brophdawg11]

It looks like you added the (unused) remix dependency at 2.10.2 - but forgot to update the others: https://github.com/pkpjpm/remix_action_defect/blob/main/my-remix-app/package.json#L14. They all need to be updated in lock-step.

I actually created a utility to do this a while back to make it easier: https://github.com/brophdawg11/upgrade-remix

I can confirm that once all are updated the problem is resolved 👍

[pkpjpm]

Bravo, that's done it! Thanks very much for your help