request.formData() doesn't resolve if it is read in Express middleware

[ricardocosta]

Hello,

I'm using a custom Express server with my Remix application and I have a middleware that captures some data from formData and sets a value on the original Express Request for further processing down the chain.

For that, I'm using createRemixRequest as such:

import { createRemixRequest } from "@remix-run/express/dist/server.js";

import type { NextFunction, Request, Response } from "express";

export async function extractFormDataProp(req: Request, res: Response, next: NextFunction) {
  const remixRequest = createRemixRequest(req, res).clone();

  if (remixRequest.method !== "POST") {
    next();
    return;
  }

  const formData = await remixRequest.formData();
  const propValue = formData.get("propName");

  if (!propValue || typeof propValue !== "string") {
    next();
  }

  req.prop = propValue;

  console.log("extractFormDataProp", { propValue,  reqProp: req.prop });

  next();
}

However, when the processing reaches the action in my route, await request.formData() doesn't resolve anymore. It seems that, somehow, calling createRemixRequest once "corrupts" the request, so any further processing of the request in a Remix action hangs because it can't resolve .formData(). I tried and request.json() also doesn't resolve.

I'm using the following versions of the relevant dependencies:

"@remix-run/express": "^2.13.1",
"@remix-run/node": "^2.13.1",
"@remix-run/react": "^2.13.1",
"express": "^4.21.1"

Thanks!

[sergiodxa]

The body of a request can only be read once, this is because the browser stream it so next time you want to read it it already ended the stream.

Either don't read it on Express or pass the read body to Remix using getLoadContext.

[ricardocosta]

Yeah, I had the feeling it would be something related with previous body consumption.

Passing the body to Remix would render the request prop in ActionFunctionArgs useless for anything related with the request of the body, right?

I guess I'll need to wait for Remix middlewares to avoid reading in Express.

Thanks @sergiodxa

[sergiodxa]

Basically instead of request.formData() you will do context.body or however you call the property, you will still need to use the request to read headers (like cookies) or the URL (for search params)

[HenriqueLimas]

@sergiodxa couldn't the remix-run/express adapter check if the body was already read and use the proper format depending on it? It uses the current createReadableStreamFromReadable when body is not present, and fallback to the proper content depending on the type of the request (json, form...).

Something like:

  if (req.method !== "GET" && req.method !== "HEAD") {
    if (!req.body) {
      init.body = node.createReadableStreamFromReadable(req);
    } else (req.is('json') {
      init.body = JSON.stringify(req.body)
    } else (req.is('application/x-www-form-urlencoded') {
      init.body = new URLSearchParams(req.body);
    } ...
  }