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

Metevier commented 4 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

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: https://github.com/clerk/javascript/blob/5056fb59438138cbaab748e2c13b6c471981bf55/packages/remix/src/ssr/utils.ts#L127-L134

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:

Create an action
Read from request body
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/@remix-run+web-fetch@4.4.2/node_modules/@remix-run/web-fetch/src/body.js:283:9)
    at new Request (/Users/Metevier/workspace/project/node_modules/.pnpm/@remix-run+web-fetch@4.4.2/node_modules/@remix-run/web-fetch/src/request.js:98:6)
    at Request.clone (/Users/Metevier/workspace/project/node_modules/.pnpm/@remix-run+web-fetch@4.4.2/node_modules/@remix-run/web-fetch/src/request.js:246:10)
    at patchRequest (/Users/Metevier/workspace/project/node_modules/.pnpm/@clerk+remix@4.2.3_@remix-run+react@2.6.0_@remix-run+server-runtime@2.10.2_react-dom@18.2.0_react@18.2.0/node_modules/@clerk/remix/src/ssr/utils.ts:128:33)
    at loadOptions (/Users/Metevier/workspace/project/node_modules/.pnpm/@clerk+remix@4.2.3_@remix-run+react@2.6.0_@remix-run+server-runtime@2.10.2_react-dom@18.2.0_react@18.2.0/node_modules/@clerk/remix/src/ssr/loadOptions.ts:15:43)
    at getAuth (/Users/Metevier/workspace/project/node_modules/.pnpm/@clerk+remix@4.2.3_@remix-run+react@2.6.0_@remix-run+server-runtime@2.10.2_react-dom@18.2.0_react@18.2.0/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 commented 3 months ago

I'm having the same problem: https://github.com/clerk/javascript/pull/3495#issuecomment-2237756527

anagstef commented 3 months ago

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

octoper commented 3 months ago

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/remix@4.2.8-snapshot.vb3a15ea --save-exact

Metevier commented 3 months ago

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/remix@4.2.8-snapshot.vb3a15ea --save-exact

Seems to have resolved the issue!

clerk / javascript