Broken on Netlify Functions

[mwawrusch]

Describe the bug

I upgraded to the latest versions and now I get this error message on post during authorize:

Error: cannot clone body after it is used
    at Authenticator.authenticate (/var/task/node_modules/remix-auth/build/authenticator.js:86:49)

Full call stack

Jun 15, 10:26:23 AM: 24f9d30b ERROR  Error: cannot clone body after it is used
    at clone (/var/task/node_modules/@remix-run/web-fetch/src/body.js:283:9)
    at new Request (/var/task/node_modules/@remix-run/web-fetch/src/request.js:88:6)
    at NodeRequest.clone (/var/task/node_modules/@remix-run/web-fetch/src/request.js:226:10)
    at NodeRequest.clone (/var/task/node_modules/@remix-run/node/fetch.js:28:18)
    at Authenticator.authenticate (/var/task/node_modules/remix-auth/build/authenticator.js:86:49)
    at action11 (/var/task/.netlify/functions-internal/server.js:6253:32)
    at Object.callRouteAction (/var/task/node_modules/@remix-run/server-runtime/data.js:40:14)
    at handleDataRequest (/var/task/node_modules/@remix-run/server-runtime/server.js:94:18)
    at requestHandler (/var/task/node_modules/@remix-run/server-runtime/server.js:34:18)
    at Runtime.handler (/var/task/node_modules/@remix-run/netlify/server.js:35:20)
    

Works like a charm locally

package.json extract :

    "dependencies": {
      "@netlify/functions": "^1.0.0",
      "@ramp-network/ramp-instant-sdk": "3.1.1",
      "@reduxjs/toolkit": "1.8.2",
      "@remix-run/netlify": "^1.6.0",
      "@remix-run/react": "^1.6.0",
      "remix-auth": "3.2.2",
      "remix-utils": "3.3.0",
      "remix": "1.6.0",
  },

Your Example Website or App

ping me in private

Steps to Reproduce the Bug or Issue

I wish it was that simple.

Expected behavior

Not error out.

Screenshots or Videos

No response

Platform

Netlify

Additional context

No response

[mwawrusch]

This is probably related: remix-run/remix#3207

[mwawrusch]

So just realized this also happens on my local netlify setup.

[mwawrusch]

So this is what my code looks like and where part of the problem lies:

export let action: ActionFunction = async ({ request }) => {

 // request.bodyUsed --> false

  const formData = await request.formData();
 // request.bodyUsed --> true

  const action = formData.get('action');

  if(action && (action.toString() === 'web3' || action.toString() === 'magic' )) {
    return await authenticator.authenticate(action.toString(), request, {
      successRedirect: "/",
      failureRedirect: "/login",
    });
  } 

};

How do we make this work?

[mwawrusch]

For future reference - Solution provided by Alex M in discord:

request.clone().formData()