Duplex Changes in Remix prevent calling getAuth after body already is read

[Metevier]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• 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

None Provided

Publishable key

pk_live_Y2xlcmsudW5pcXVlbGlicmFyeS5jb20k

Description

Recent changes to the remix package to support duplexed connections are causing breaking changes when you call getAuth after utilizing the request body.
This seems to be due to an update that calls request.clone(), which will fail if the body has already been read:

javascript/packages/remix/src/ssr/utils.ts

Lines 127 to 134 in 5056fb5

	export const patchRequest = (request: Request) => {
	const clonedRequest = request.clone();
	// If duplex is not set, set it to 'half' to avoid duplex issues with unidici
	if (clonedRequest.method !== 'GET' && clonedRequest.body !== null && !('duplex' in clonedRequest)) {
	(clonedRequest as unknown as { duplex: 'half' }).duplex = 'half';
	}
	return clonedRequest;
	};

Here is a simple example action:

export const action = async (args: ActionFunctionArgs) => {
  const data = await args.request.text()
  const auth = await getAuth(args) // <-Throws

 return data
}

Steps to reproduce:

1. Create an action
2. Read from request body
3. Call getAuth

Expected behavior:

getAuth can be called after reading from request body.

Actual behavior:

Exception is thrown:

Error: cannot clone body after it is used
    at clone (/Users/Metevier/workspace/project/node_modules/.pnpm/@[email protected]/node_modules/@remix-run/web-fetch/src/body.js:283:9)
    at new Request (/Users/Metevier/workspace/project/node_modules/.pnpm/@[email protected]/node_modules/@remix-run/web-fetch/src/request.js:98:6)
    at Request.clone (/Users/Metevier/workspace/project/node_modules/.pnpm/@[email protected]/node_modules/@remix-run/web-fetch/src/request.js:246:10)
    at patchRequest (/Users/Metevier/workspace/project/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@clerk/remix/src/ssr/utils.ts:128:33)
    at loadOptions (/Users/Metevier/workspace/project/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@clerk/remix/src/ssr/loadOptions.ts:15:43)
    at getAuth (/Users/Metevier/workspace/project/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@clerk/remix/src/ssr/getAuth.ts:15:25)

Environment

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1
    Memory: 152.38 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/Library/Caches/fnm_multishells/17134_1717294792516/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/17134_1717294792516/bin/yarn
    npm: 9.6.7 - ~/Library/Caches/fnm_multishells/17134_1717294792516/bin/npm
    pnpm: 8.15.1 - ~/Library/Caches/fnm_multishells/17134_1717294792516/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.182
    Safari: 17.2.1
  npmPackages:
    @arco-design/web-react: ^2.62.0 => 2.62.0
    @arco-themes/react-easy-email-pro: ^0.0.1 => 0.0.1
    @aws-sdk/client-s3: 3.461.0 => 3.461.0
    @clerk/remix: ^4.2.1 => 4.2.3
    @headlessui/react: ^2.1.2 => 2.1.2
    @heroicons/react: ^2.1.1 => 2.1.1
    @nivo/bar: =0.80.0 => 0.80.0
    @nivo/core: =0.80.0 => 0.80.0
    @nivo/line: =0.80.0 => 0.80.0
    @nivo/pie: =0.80.0 => 0.80.0
    @playwright/test: ^1.41.2 => 1.41.2
    @react-awesome-query-builder/core: ^6.5.2 => 6.5.2
    @react-awesome-query-builder/ui: ^6.5.2 => 6.5.2
    @remix-run/css-bundle: ^2.6.0 => 2.6.0
    @remix-run/dev: ^2.6.0 => 2.6.0
    @remix-run/eslint-config: ^2.6.0 => 2.6.0
    @remix-run/node: ^2.6.0 => 2.6.0
    @remix-run/react: ^2.6.0 => 2.6.0
    @remix-run/serve: ^2.6.0 => 2.6.0
    @remix-run/testing: ^2.6.0 => 2.6.0
    @sentry/remix: ^7.101.1 => 7.101.1
    @storybook/addon-essentials: ^7.6.8 => 7.6.8
    @storybook/addon-interactions: ^7.6.8 => 7.6.8
    @storybook/addon-links: ^7.6.8 => 7.6.8
    @storybook/addon-styling: ^1.3.7 => 1.3.7
    @storybook/blocks: ^7.6.8 => 7.6.8
    @storybook/react: ^7.6.8 => 7.6.8
    @storybook/react-vite: ^7.6.8 => 7.6.8
    @storybook/testing-library: ^0.2.2 => 0.2.2
    @tailwindcss/container-queries: ^0.1.1 => 0.1.1
    @tailwindcss/forms: ^0.5.7 => 0.5.7
    @tanem/react-nprogress: ^5.0.51 => 5.0.51
    @tanstack/react-table: ^8.12.0 => 8.12.0
    @testing-library/dom: ^9.3.4 => 9.3.4
    @testing-library/jest-dom: ^5.17.0 => 5.17.0
    @testing-library/react: ^14.2.1 => 14.2.1
    @types/jsdom: ^21.1.6 => 21.1.6
    @types/lodash.groupby: ^4.6.9 => 4.6.9
    @types/mjml: ^4.7.4 => 4.7.4
    @types/react: ^18.2.55 => 18.2.55
    @types/react-dom: ^18.2.19 => 18.2.19
    @vitejs/plugin-react: ^4.2.1 => 4.2.1
    autoprefixer: ^10.4.17 => 10.4.17
    awesome-phonenumber: ^5.11.0 => 5.11.0
    chromatic: ^6.20.0 => 6.20.0
    class-variance-authority: ^0.7.0 => 0.7.0
    dayjs: ^1.11.10 => 1.11.10
    domain-functions: ^2.5.4 => 2.5.4
    easy-email-pro-core: ^1.33.4 => 1.33.4
    easy-email-pro-editor: ^1.33.4 => 1.33.4
    easy-email-pro-plugins: ^1.33.4 => 1.33.4
    easy-email-pro-theme: ^1.33.4 => 1.33.4
    eslint-plugin-storybook: ^0.6.15 => 0.6.15
    framer-motion: ^10.18.0 => 10.18.0
    html-to-image: ^1.11.11 => 1.11.11
    isbot: ^3.8.0 => 3.8.0
    jsdom: ^22.1.0 => 22.1.0
    lodash.groupby: ^4.6.0 => 4.6.0
    mjml: ^4.15.3 => 4.15.3
    mjml-browser: ^4.15.3 => 4.15.3
    openai: ^4.52.0 => 4.52.0
    prettier: ^3.2.5 => 3.2.5
    prop-types: ^15.8.1 => 15.8.1
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    react-final-form: ^6.5.9 => 6.5.9
    react-hook-form: ^7.50.1 => 7.50.1
    react-hot-toast: ^2.4.1 => 2.4.1
    react-intersection-observer: ^9.8.1 => 9.8.1
    react-popper: ^2.3.0 => 2.3.0
    react-tailwindcss-datepicker: ^1.6.6 => 1.6.6
    react-tooltip: ^5.26.2 => 5.26.2
    remix-flat-routes: ^0.6.4 => 0.6.4
    remix-forms: ^2.3.0 => 2.3.0
    remix-utils: ^7.5.0 => 7.5.0
    slate: ^0.102.0 => 0.102.0
    slate-history: ^0.100.0 => 0.100.0
    slate-react: ^0.102.0 => 0.102.0
    storybook: ^7.6.8 => 7.6.8
    tailwindcss: ^3.4.1 => 3.4.1
    vite: ^5.1.3 => 5.1.3
    vite-tsconfig-paths: ^4.3.1 => 4.3.1
    zod-form-data: ^2.0.2 => 2.0.2

[ariofrio]

I'm having the same problem: #3495 (comment)

[anagstef]

Hello! Thank you for reporting this issue. We will investigate as soon as possible.

[octoper]

Hey @Metevier and @ariofrio

Thanks for reporting the issue!
I have made a fix for this, you can try it out by installing the snapshot below and let me know if that fixes your issue!

npm i @clerk/[email protected] --save-exact

[Metevier]

Hey @Metevier and @ariofrio

Thanks for reporting the issue! I have made a fix for this, you can try it out by installing the snapshot below and let me know if that fixes your issue!

npm i @clerk/[email protected] --save-exact

Seems to have resolved the issue!