TypeError: Body is unusable when using Remix(experimental-netlify-edge) Actions

What version of Remix are you using?

0.0.0-experimental-fd9fa7f4

Steps to Reproduce

1. Use Node 16.x or 18.x, the result is the same.
2. Ensure that you have the Netlify CLI installed.
3. Run npx create-remix --template https://github.com/netlify/remix-edge-template. Use the default answers when the Remix CLI asks you questions. Note: You can create a TypeScript project (default) or a JavaScript project. It doesn’t matter, the result is the same in regards to the error.
4. Modify the file /app/routes/index.js with the following code:

import type { LoaderFunction, ActionFunction } from "@remix-run/server-runtime"
import { useLoaderData } from "@remix-run/react";

let projectName: string | null = null;

export const loader: LoaderFunction = async () => {
  return { name: projectName ?? 'Create a Project Name' };
};

export const action: ActionFunction = async({ request }) => {
  const body = await request.formData();

  console.log('body',body);
  projectName = body.get("projectName") as string;
  console.log('projectName pulled from form data', projectName)
  console.log(`request body is used ${request.bodyUsed}`)

  console.log('action ran')

  return null
}

export default function Index() {
  let project = useLoaderData();

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Welcome to Remix {project.name}</h1>
      <ul>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/blog"
            rel="noreferrer"
          >
            15m Quickstart Blog Tutorial
          </a>
        </li>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/jokes"
            rel="noreferrer"
          >
            Deep Dive Jokes App Tutorial
          </a>
        </li>
        <li>
          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
            Remix Docs
          </a>
        </li>
      </ul>
    </div>
  );
}

1. run ntl dev to start the application in development mode.
2. Things build without any failures.
3. Navigate to http://localhost:3000 and the Welcome to Remix page loads.

1. To test out the action, use a tool like Postman or Thunder Client (if using VS Code).

2. Create a POST for the URL to http://localhost:3000/?index. Pass in some form data

This is how it would look in Postman

1. The tools above will respond with Unexpected Server Error (HTTP CODE 500). If you look at the logs in your terminal where you ran ntl dev, you’ll see the following.

Watching Remix app in development mode...
◈ Loaded edge function server
💿 Built in 237ms
body FormData {
  [Symbol("entry list")]: [ { name: "projectName", value: "yolo" } ],
  [Symbol("[[webidl.brand]]")]: Symbol("[[webidl.brand]]")
}
projectName pulled from form data yolo
request body is used true
action ran
There was an error running the data loader for route routes/index
TypeError: Body is unusable.
    at EdgeRequest.clone (deno:ext/fetch/23_request.js:362:15)
    at handleDocumentRequest (file:///Users/nicktaylor/dev/remix-edge-demo/.netlify/edge-functions/server.js:13507:51)
    at async requestHandler (file:///Users/nicktaylor/dev/remix-edge-demo/.netlify/edge-functions/server.js:13667:22)
    at async Object.function (file:///Users/nicktaylor/dev/remix-edge-demo/.netlify/edge-functions/server.js:13924:26)
    at async FunctionChain.runFunction (https://625d32be1b90870009edfc99--edge-bootstrap.netlify.app/bootstrap/function_chain.ts:151:24)
    at async FunctionChain.run (https://625d32be1b90870009edfc99--edge-bootstrap.netlify.app/bootstrap/function_chain.ts:130:22)
    at async handleRequest (https://625d32be1b90870009edfc99--edge-bootstrap.netlify.app/bootstrap/handler.ts:35:22)
    at async Server.#respond (https://deno.land/std@0.114.0/http/server.ts:350:24)

There is also a discussion in Discord for more context if need be. See https://discord.com/channels/770287896669978684/778004294673760266/968514769223049326

Expected Behavior

No errors should occur when a Remix action is called, e.g. a POST to http://localhost:3000/?index when Netlify Edge functions are enabled.

Actual Behavior

An error occurs when a Remix action is called, e.g. a POST to http://localhost:3000/?index when Netlify Edge functions are enabled.

There was an error running the data loader for route routes/index
TypeError: Body is unusable.
    at EdgeRequest.clone (deno:ext/fetch/23_request.js:362:15)
    at handleDocumentRequest (file:///Users/nicktaylor/dev/remix-edge-demo/.netlify/edge-functions/server.js:13507:51)
    at async requestHandler (file:///Users/nicktaylor/dev/remix-edge-demo/.netlify/edge-functions/server.js:13667:22)
    at async Object.function (file:///Users/nicktaylor/dev/remix-edge-demo/.netlify/edge-functions/server.js:13924:26)
    at async FunctionChain.runFunction (https://625d32be1b90870009edfc99--edge-bootstrap.netlify.app/bootstrap/function_chain.ts:151:24)
    at async FunctionChain.run (https://625d32be1b90870009edfc99--edge-bootstrap.netlify.app/bootstrap/function_chain.ts:130:22)
    at async handleRequest (https://625d32be1b90870009edfc99--edge-bootstrap.netlify.app/bootstrap/handler.ts:35:22)
    at async Server.#respond (https://deno.land/std@0.114.0/http/server.ts:350:24)

[mcansh]

@mcansh, I see that #2736 got merged. 🥳 For the request cloning, would you like me to put up a PR, or is the core team working on that?

interestingly enough without any cloning it works https://netlify-thinks-mcansh-is-great.netlify.app/

https://github.com/mcansh/gdshfd-sjfbdsh

i’ll verify again in the morning after the nightly goes out

[mcansh]

hey @nickytonline, thanks so much for digging into this!!

we’re in the process of swapping node-fetch for @web-std/fetch (https://github.com/remix-run/remix/pull/2736) so i’ll check that it works correctly there - im assuming once we switch we can freely clone the action request again

edit: over there, i get the following

body used: false
{ json: { message: 'Hello world!' } }
body used: false
TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is locked

and cloning the secondRequest works as expected 😃

const secondRequest = new Request("https://post.deno.dev", firstRequest.clone());

//=> body used: false
//=> { json: { message: 'Hello world!' } }
//=> body used: false
//=> { json: { message: 'Hello world!' } }