Body has already been read

[3bdallahz]

I'm using React Router as a...

framework

Reproduction

Go to https://stackblitz.com/edit/vitejs-vite-f2hy31xg
click on Log on server twice
the first time succeeds, the second time fails

System Info

System:
    OS: macOS 15.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 90.55 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.1.0 - ~/.local/share/mise/installs/node/24.1.0/bin/node
    npm: 11.3.0 - ~/.local/share/mise/installs/node/24.1.0/bin/npm
    pnpm: 10.12.3 - ~/.local/share/mise/installs/node/24.1.0/bin/pnpm
  npmPackages:
    react-router: 0.0.0-experimental-7e26cc4bc => 0.0.0-experimental-7e26cc4bc 
    vite: ^7.0.0 => 7.0.0

Used Package Manager

pnpm

Expected Behavior

no error

Actual Behavior

I get the following error, saying that Body has already been read
here is the error

<-- POST /
TypeError: Body is unusable: Body has already been read
    at consumeBody (https://sb15gahbn3b-qzob.w-credentialless-staticblitz.com/builtins.97a3df4f.js:97:226853)
    at _Request.formData (https://sb15gahbn3b-qzob.w-credentialless-staticblitz.com/builtins.97a3df4f.js:97:226169)
    at processServerAction (/home/projects/sb1-5gahbn3b/node_modules/.pnpm/react-router@0.0.0-experimental-7e26cc4bc_react-dom@19.1.0_react@19.1.0/node_modules/react-router/dist/development/chunk-VYYOGKZK.mjs?v=f40a5151:2262:49)
    at unstable_stream (/home/projects/sb1-5gahbn3b/node_modules/.pnpm/react-router@0.0.0-experimental-7e26cc4bc_react-dom@19.1.0_react@19.1.0/node_modules/react-router/dist/development/chunk-VYYOGKZK.mjs?v=f40a5151:2364:31)
    at respondOrStreamStaticContext (/home/projects/sb1-5gahbn3b/node_modules/.pnpm/react-router@0.0.0-experimental-7e26cc4bc_react-dom@19.1.0_react@19.1.0/node_modules/react-router/dist/development/chunk-VYYOGKZK.mjs?v=f40a5151:671:23)
    at eval (/home/projects/sb1-5gahbn3b/node_modules/.pnpm/react-router@0.0.0-experimental-7e26cc4bc_react-dom@19.1.0_react@19.1.0/node_modules/react-router/dist/development/chunk-VYYOGKZK.mjs?v=f40a5151:810:22)
    at runMiddlewarePipeline (/home/projects/sb1-5gahbn3b/node_modules/.pnpm/react-router@0.0.0-experimental-7e26cc4bc_react-dom@19.1.0_react@19.1.0/node_modules/react-router/dist/development/chunk-VYYOGKZK.mjs?v=f40a5151:1508:24)
    at async Object.query (/home/projects/sb1-5gahbn3b/node_modules/.pnpm/react-router@0.0.0-experimental-7e26cc4bc_react-dom@19.1.0_react@19.1.0/node_modules/react-router/dist/development/chunk-VYYOGKZK.mjs?v=f40a5151:725:24)
    at async generateRenderResponse (/home/projects/sb1-5gahbn3b/node_modules/.pnpm/react-router@0.0.0-experimental-7e26cc4bc_react-dom@19.1.0_react@19.1.0/node_modules/react-router/dist/development/chunk-VYYOGKZK.mjs?v=f40a5151:2355:18)
    at async matchRSCServerRequest (/home/projects/sb1-5gahbn3b/node_modules/.pnpm/react-router@0.0.0-experimental-7e26cc4bc_react-dom@19.1.0_react@19.1.0/node_modules/react-router/dist/development/chunk-VYYOGKZK.mjs?v=f40a5151:2199:18)
--> POST / 500 11ms

[3bdallahz]

@jacob-ebey @markdalgleish
maybe you can look at this one, as I was playing around with the latest react router with RSC

[3bdallahz]

the change that caused the error happend when I modified logOnServer function to return JSX

  const logOnServer = async () => {
    'use server';
    await new Promise((r) => setTimeout(r, 500));
    console.log('Running action on server!');
    console.log(
      `  data to prove that scoped vars work: ${message} and it is now ${new Date().toISOString()}`
    );
    return <div>Action state: {new Date().toISOString()}</div>;
  };

[github-actions]

To align with our new Open Governance model, we are now requiring that all issues have a minimal and runnable reproduction. To that end, we're doing some housekeeping in the repo to clean up existing issues that do not have a valid reproduction. This should get us down to a more manageable number of issues and allow us to be more responsive to existing and newly filed issues.

We're using a Github actions script to identify issues without a reproduction by looking for a StackBlitz, CodeSandbox, or Github link in the issue body. This won't be perfect, so if this issue has a reproduction on another platform, please comment back on here and we can re-open the issue. Similarly, if there's a reproduction buried in a comment, please move the link into the description and comment back. Please tag @brophdawg11 or @brookslybrand in your comment so we get a notification as well 🙂.

If this issue did not have a reproduction but is still valid, or if you wish to start with a fresh issue, please create a new issue with a fresh reproduction against v7 and link to this issue in the new description.

If this a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support it can be considered for implementation.

If you have any questions you can always reach out on Discord. Thanks again for providing feedback and helping us make React Router even better!

[3bdallahz]

it does have reproduction
tagging @brophdawg11 as mentioned in the comment above

[brophdawg11]

That repro doesn't open anything for me? Can you update that and re-tag?

[3bdallahz]

I updated the link to reproduction @brophdawg11
not sure what happend with the first link to stackblitz

[hi-ogawa]

The issue might be a mix of my side and react router side.
On my side, there might be an issue with action closure encryption, which happens because logOnServer accesses outer-scope variable message. I'll see if I can reproduce the same without react-router.
(Side note: I added a flag enableActionEncryption hi-ogawa/vite-plugins#1084 to allow disabling this, so maybe debugging this become easier.)

Then on react router side, without the encryption i.e. without out-scope variable such as https://stackblitz.com/edit/vitejs-vite-tckbxf8e?file=src%2Froutes%2Fhome%2Fhome.tsx

  const logOnServer = async () => {
    'use server';
    return <div>Action state: foo</div>;
  };

it causes a following error and this is because react router is not handling temporaryReferences.

React Element cannot be passed to Server Functions from the Client without a temporary reference set. Pass a TemporaryReferenceSet to the options. [<div/>, FormData] ^^^^^^

The code isn't explicitly passing React Element to actions, but this implicitly happens because useActionState tries to send back the last action return value to the same action on 2nd call.