@clerk/remix v4.0.12 RequestInit: duplex option is required when sending a body.

jtparrett commented 5 months ago

Preliminary Checks

[X] I have reviewed the documentation: https://clerk.com/docs
[X] I have searched for existing issues: https://github.com/clerk/javascript/issues
[X] I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
[X] This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/jtparrett/rcdriftuk-website

Publishable key

pk_live_Y2xlcmsucmNkcmlmdC51ayQ

Description

This issue only happens in production on vercel, this issue DOES NOT HAPPEN LOCALLY.

I have included the production repo just because the issue only happens in production on vercel.

The problem is with any remix action that uses getAuth() will give the error below regarding a duplex option on the body.

The error happens when using node 20 or node 18. I've also tried updating every possible package.

Please see file: app/routes/events.$id.tsx -> action

Steps to reproduce:

Create a remix action which uses getAuth()
Fire the action using a remix
component

Expected behavior: The getAuth method should return the user

Actual behavior: The getAuth method has the following error

TypeError: RequestInit: duplex option is required when sending a body.
    at new Request (node:internal/deps/undici/undici:5096:19)
    at new ClerkRequest (/var/task/node_modules/@clerk/backend/dist/internal.js:2273:5)
    at createClerkRequest (/var/task/node_modules/@clerk/backend/dist/internal.js:2313:54)
    at loadOptions (/var/task/node_modules/@clerk/remix/dist/ssr/loadOptions.js:34:63)
    at getAuth (/var/task/node_modules/@clerk/remix/dist/ssr/getAuth.js:32:60)
    at action5 (file:///var/task/build/index.js:3030:26)
    at Object.callRouteAction (/var/task/node_modules/@remix-run/server-runtime/dist/data.js:37:22)
    at commonRoute.action (/var/task/node_modules/@remix-run/server-runtime/dist/routes.js:63:69)
    at actualHandler (/var/task/node_modules/@remix-run/router/dist/router.cjs.js:4218:14)
    at /var/task/node_modules/@remix-run/router/dist/router.cjs.js:4230:27

Environment

System:
    OS: macOS 14.3
    CPU: (8) arm64 Apple M2
    Memory: 71.30 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
  Browsers:
    Chrome: 125.0.6422.76
    Safari: 17.3
  npmPackages:
    @clerk/remix: ^4.0.12 => 4.0.12 
    @clerk/themes: ^2.1.2 => 2.1.2 
    @pandacss/dev: ^0.38.0 => 0.38.0 
    @prisma/client: ^5.9.1 => 5.13.0 
    @remix-run/css-bundle: ^2.9.2 => 2.9.2 
    @remix-run/dev: ^2.9.2 => 2.9.2 
    @remix-run/eslint-config: ^2.9.2 => 2.9.2 
    @remix-run/node: ^2.9.2 => 2.9.2 
    @remix-run/react: ^2.9.2 => 2.9.2 
    @remix-run/serve: ^2.9.2 => 2.9.2 
    @types/leaflet: ^1.9.4 => 1.9.12 
    @types/pluralize: ^0.0.33 => 0.0.33 
    @types/react: ^18.2.20 => 18.3.1 
    @types/react-dom: ^18.2.7 => 18.3.0 
    @vercel/analytics: ^1.1.1 => 1.2.2 
    date-fns: ^2.30.0 => 2.30.0 
    eslint: ^8.38.0 => 8.57.0 
    isbot: ^3.6.8 => 3.8.0 
    leaflet: ^1.9.4 => 1.9.4 
    pluralize: ^8.0.0 => 8.0.0 
    prisma: ^5.9.1 => 5.13.0 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    react-icons: ^5.0.1 => 5.2.0 
    react-leaflet: ^4.2.1 => 4.2.1 
    react-markdown: ^9.0.1 => 9.0.1 
    react-tiny-popover: ^8.0.4 => 8.0.4 
    tiny-invariant: ^1.3.1 => 1.3.3 
    typescript: ^5.1.6 => 5.4.5 
    zod: ^3.22.4 => 3.23.6

briardg commented 5 months ago

Hello,

I have the same issue, and it is not happening inside the Remix Loader but only in the action.

My version of node is the same.

I also added the Vercel recommendation using @vercel/remix instead of @remix-run/node and vite config import { vercelPreset } from "@vercel/remix/vite";

But nothing helped

briardg commented 5 months ago

@jtparrett I have found a way around the issue in case you are interested.

I thought it was weird that in the loader it works but not in the action, So I dived inside Clerk code and realized they kind of piggy bag on our request.

So I tried to recreate a request that should work basically like in Loaders a get request with headers as this is where the Auth information is saved.

const generateNewRequestForClerk = (request: Request) => {
  const originalRequest = request.clone();
  const newRequestInit = {
    method: "GET", // Change the method to GET
    headers: new Headers(originalRequest.headers), // Copy headers from the original request
  };

  // Remove content-type header as it's not needed for GET and may cause issues
  newRequestInit.headers.delete("Content-Type");

  // Instantiate the new request without the body attribute
  return new Request(originalRequest.url, newRequestInit);
};

  const auth = await getAuth({
    ...args,
    request: generateNewRequestForClerk(args.request),
  });

Try it out and please tell me if it is working on your side too? 🙏

LekoArts commented 5 months ago

@octoper will look into this!

briardg commented 5 months ago

@octoper will look into this!

I can be available for any live coding meeting if needed

jtparrett commented 5 months ago

briardg

Thanks for this! Yes, that fix also worked in my case 👍 using it as a workaround for now.

frago12 commented 4 months ago

@briardg thank you for the workaround, worked well on my end too

LekoArts commented 4 months ago

This was fixed with https://github.com/clerk/javascript/pull/3495 👍

ainoya commented 4 months ago

Hello. I'm using clerk/remix on Cloudflare Pages, and when using getAuth within an ActionFunction, it seems to generate a new error from the code that was fixed in the PR #3495 :thinking: The workaround provided seems to prevent the error from occurring.

TypeError: Cannot set property duplex of #<_Request> which has only a getter
    at patchRequest (.../node_modules/@clerk/remix/dist/ssr/utils.js:115:26)

arminnaimi commented 4 months ago

Hello. I'm using clerk/remix on Cloudflare Pages, and when using getAuth within an ActionFunction, it seems to generate a new error from the code that was fixed in the PR #3495 :thinking: The workaround provided seems to prevent the error from occurring.
TypeError: Cannot set property duplex of #<_Request> which has only a getter

    at patchRequest (.../node_modules/@clerk/remix/dist/ssr/utils.js:115:26)

I just started a new project two days ago and I get the same error running on regular Node.js.

nsb commented 4 months ago

This was fixed with #3495 👍

But this unfortunately introduced a regression. Discussion on Discord here https://discord.com/channels/856971667393609759/1253975184818573313

@arminnaimi I have reported this bug. Hopefully they will fix it soon. In the meantime you can just downgrade to the previous version of @clerk/remix.

octoper commented 4 months ago

Thanks you for reporting that I will take a look at it today!

octoper commented 4 months ago

Hey!

We have released a fix for the regression that was introduced in #3495, you can upgrade to the latest version of the Remix SDK and it will be resolved!

clerk / javascript