Throwing `AbortController` error every response in the Vite dev server when using Remix, Vite, and Cloudflare

[caprolactam]

Reproduction

1. Generate a project using official cloudflare template.
   npx create-remix@latest --template remix-run/remix/templates/cloudflare
2. Run the app with the remix vite:build and remix vite:dev.
3. Visit http://localhost:5173, then the app throws an error.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 AMD Ryzen 5 5625U with Radeon Graphics
    Memory: 6.28 GB / 23.35 GB
Binaries:
    Node: 20.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
    Edge: Chromium (128.0.2739.79)
    Internet Explorer: 11.0.22621.3527
npmPackages:
    @remix-run/cloudflare: ^2.12.1 => 2.12.1
    @remix-run/cloudflare-pages: ^2.12.1 => 2.12.1
    @remix-run/dev: ^2.12.1 => 2.12.1
    @remix-run/react: ^2.12.1 => 2.12.1
    vite: ^5.1.0 => 5.4.7

Used Package Manager

npm

Expected Behavior

The app should run without this error.

Actual Behavior

Throwing this error every response.

TypeError [ERR_INVALID_STATE]: Invalid state: Controller is already closed
    at ReadableByteStreamController.close (node:internal/webstreams/readablestream:1156:13)
    at close (/project/workspace/node_modules/react-dom/cjs/react-dom-server.browser.development.js:143:15)
    at flushCompletedQueues (/project/workspace/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6906:9)
    at abort (/project/workspace/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6951:7)
    at EventTarget.listener (/project/workspace/node_modules/react-dom/cjs/react-dom-server.browser.development.js:7000:9)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:826:20)
    at EventTarget.dispatchEvent (node:internal/event_target:761:26)
    at abortSignal (node:internal/abort_controller:371:10)
    at AbortController.abort (node:internal/abort_controller:393:5)
    at EventTarget.abort (node:internal/deps/undici/undici:6279:21) {
  code: 'ERR_INVALID_STATE'
}

Note that the app works fine in Wrangler(wrangler pages dev ./build/client), but this error occurs when using the Vite dev server. Additionally, this error is thrown when using Remix version is 2.12.1, but not with version 2.12.0. I think the changes in PR #9976 are causing this issue.

[shmuli9]

Getting this too

[WonderPanda]

I just started working with Remix + Cloudflare on a prototype and immediately ran into this.

[Phoenixmatrix]

I can confirm getting this issue too. @caprolactam's theory is correct too. I forked the plugin and removed #9976's changes, and everything works as expected without errors.

[IvorySun]

Hello, I am speaking here for the first time, if there is something inappropriate, please let me know in time and thank you.
I've upgraded the project and I'm still getting the error, in every response. Additional information: Initial project using Cloudflare and Remix templates. will encounter the above errors. I copied the previous project to a new folder, and I also got the error above. The original project will not report errors, Thank you again.
The following error message is displayed:
TypeError [ERR_INVALID_STATE]: Invalid state: Controller is already closed
at ReadableByteStreamController.close (node:internal/webstreams/readablestream:1159:13)
at close (G:\myProjects\cloudflare-2\books-admin.yarn_virtual_\react-dom-virtual-8d992f7834\0\cache\react-dom-npm-18.3.1-a805663f38-a752496c19.zip\node_modules\react-dom\cjs\react-dom-server.browser.development.js:143:15)
at flushCompletedQueues (G:\myProjects\cloudflare-2\books-admin.yarn_virtual_\react-dom-virtual-8d992f7834\0\cache\react-dom-npm-18.3.1-a805663f38-a752496c19.zip\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6906:9)
at abort (G:\myProjects\cloudflare-2\books-admin.yarn_virtual_\react-dom-virtual-8d992f7834\0\cache\react-dom-npm-18.3.1-a805663f38-a752496c19.zip\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6951:7)
at AbortSignal.listener (G:\myProjects\cloudflare-2\books-admin.yarn_virtual_\react-dom-virtual-8d992f7834\0\cache\react-dom-npm-18.3.1-a805663f38-a752496c19.zip\node_modules\react-dom\cjs\react-dom-server.browser.development.js:7000:9)
at [nodejs.internal.kHybridDispatch] (node:internal/event_target:816:20)
at AbortSignal.dispatchEvent (node:internal/event_target:751:26)
at abortSignal (node:internal/abort_controller:382:10)
at AbortController.abort (node:internal/abort_controller:404:5)
at AbortSignal.abort (node:internal/deps/undici/undici:9235:14)
at [nodejs.internal.kHybridDispatch] (node:internal/event_target:816:20)
at AbortSignal.dispatchEvent (node:internal/event_target:751:26)
at abortSignal (node:internal/abort_controller:382:10)
at AbortController.abort (node:internal/abort_controller:404:5)
at ServerResponse. (G:\myProjects\cloudflare-2\books-admin.yarn_virtual_@remix-run-dev-virtual-5750952721\0\cache@remix-run-dev-npm-2.12.1-233a55d9cb-5bbdf06ab2.zip\node_modules@remix-run\dev\dist\vite\node-adapter.js:46:40)
at ServerResponse.emit (node:events:519:28)
at ServerResponse.emit (node:domain:488:12)
at emitCloseNT (node:_http_server:1030:10)
at process.processTicksAndRejections (node:internal/process/task_queues:89:21) {
code: 'ERR_INVALID_STATE'
}
"dependencies": {
"@remix-run/cloudflare": "^2.12.1",
"@remix-run/cloudflare-pages": "^2.12.1",
"@remix-run/react": "^2.12.1",
"bcryptjs": "^2.4.3",
"isbot": "^5.1.17",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@cloudflare/workers-types": "^4.20240925.0",
"@eslint/js": "^9.11.1",
"@remix-run/dev": "^2.12.1",
"@remix-run/server-runtime": "^2.12.1",

[caprolactam]

@IvorySun Try fixing the version of Remix to 2.12.0 instead of ^2.12.1 in package.json.
After that don't forget to run npm install (if you're using npm).

{
  "dependencies": {
    "@remix-run/cloudflare": "2.12.0",
    "@remix-run/cloudflare-pages": "2.12.0",
    "@remix-run/react": "2.12.0",
  },
  "devDependencies": {
    "@remix-run/dev": "2.12.0",
    "@remix-run/server-runtime": "2.12.0",
  }
}

[IvorySun]

hey @caprolactam I am very happy to see your reply, thank you so much. I will try it as you said.
Another important supplementary information. After I copied the original project to the new folder, "dev": "remix vite:dev", an error message appeared: @cloudflare/workerd-windows-64 is required. The previous project did not encounter this situation. Only after adding it separately can dev be run, and then an error will be reported in each response. It is the same as the situation mentioned in this post.
Thank you again for your patience.
I downgraded all 5 related projects to 2.12.0, and the error still occurred, the same as before.

[caprolactam]

Hi @IvorySun the issue you're facing might be more complicated than the bug mentioned in this issue. Unfortunately, I can only provide a workaround related to this bug. Anyway, please double-check the following points. If this doesn't fix it, there might be another problem.

1. Lock the Remix packages version, not "@remix-run/cloudflare": "^2.12.1", but "@remix-run/cloudflare": "2.12.0". If you include ^ at the beginning of the version, it might apply updates 2.12.1. (You will be able to restore ^ after fixing this bug.)
2. Ensure both @cloudflare/workers-types and wrangler are up-to-date. The current versions are "@cloudflare/workers-types": "^4.20240925.0" and "wrangler": "3.78.10".

[IvorySun]

Hi @caprolactam
First of all, thank you very much for your patience.

I updated and locked the version of the relevant package exactly as you said. But the error still occurs.
For testing, I completely copied a previous project, including package.json, but still reported an error.
The previous project is currently normal and has no errors.
I suspect that the problem is caused by wrangler, because wrangler automatically updates the version according to the creation time.
I have raised the issue in the cloudflare community. But I have not received a response so far.

Thank you very much for your enthusiastic response.
If there is any useful progress in the cloudflare community's questions, I will share it with you and everyone in the GitHub community.

Thank you again
Kind regards,
Ivory

[bmatzner]

@IvorySun please make sure the dev package 2.12.0 is indeed installed (by inspecting your package manager lock file). You might have to delete your lock file and run a fresh install to do that. I can confirm using 2.12.0 does not cause the issue.

[IvorySun]

@bmatzner @caprolactam You are right.
I just tried again,

Lock the Remix packages version, not "@remix-run/cloudflare": "^2.12.1", but "@remix-run/cloudflare": "2.12.0". If you include ^ at the beginning of the version, it might apply updates 2.12.1. (You can restore ^ after fixing this bug.)
Ensure both @cloudflare/workers-types and wrangler are up-to-date. The current versions are "@cloudflare/workers-types": "^4.20240925.0" and "wrangler": "3.78.10".

No errors now.
You are so kind, I appreciate it very much 💯

[raggesilver]

Getting this on a fresh Cloudflare project as well. Unfortunately pinning cloudflare to 2.12.0 brings back the type single fetch errors which were fixed in 2.12.1...

[joakimsjo]

We are also seeing this behaviour
cc @jonjohansen

[brophdawg11]

Hm - I guess since these aren't actual Node req/res objects they shouldn't get the same treatment - Cloudflare must be doing something on it's own inside of getPlatformProxy. Maybe we need to call dispose when the node response closes instead of aborting the signal...or maybe we don't have to do anything if they handle it internally.

We'll take a look at this, but in the meantime - @Phoenixmatrix since you forked and removed that change - are you able to confirm that with that changes removed, are requests aborted properly on the server during dev when using cloudflare?

The easiest way to check this is to set up a loader such as the following and then use a fetcher.load to hit it a few times quickly so it interrupts the previous fetches:

export async function loader({ request }: LoaderFunctionArgs) {
  request.signal.addEventListener("abort", () => console.log("signal aborted"));
  await new Promise((r) => setTimeout(r, 1000));
  return { value: Math.random() };
}