Next.js latest (14.2.0) + Clerk + tRPC + Turbo - fails "createContext only works in Client Components"

Question

Next.js latest (14.2.0) + Clerk + tRPC + Turbo - fails "createContext only works in Client Components"

AlonMiz opened this issue 9 months ago · 13 comments

AlonMiz commented 9 months ago

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

not yet

Publishable key

pk_test_cHJvcGVyLXNwYXJyb3ctNDkuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

Steps to reproduce:

when upgrading to next 14.2.0 see this error
accessing a trpc API route

Expected behavior:

would not expect the usage of context in a server route. there's shouldn't be a 'use client' as this is a pure API route

Actual behavior:

erroring on every trpc route

createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at //.next/server/chunks/node_modules_@clerk_78c87f._.js:149:247
    at [project]/node_modules/@clerk/clerk-react/dist/esm/contexts/StructureContext.js [app-route] (ecmascript) (//.next/server/chunks/node_modules_@clerk_78c87f._.js:168:3)
    at instantiateModule (//.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (//.next/server/chunks/[turbopack]_runtime.js:572:12)
    at esmImport (//.next/server/chunks/[turbopack]_runtime.js:122:20)
    at //.next/server/chunks/node_modules_@clerk_78c87f._.js:1419:194
    at [project]/node_modules/@clerk/clerk-react/dist/esm/contexts/ClerkProvider.js [app-route] (ecmascript) <locals> (//.next/server/chunks/node_modules_@clerk_78c87f._.js:1462:3)
    at instantiateModule (//.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (//.next/server/chunks/[turbopack]_runtime.js:572:12)
    at esmImport (//.next/server/chunks/[turbopack]_runtime.js:122:20)
    at //.next/server/chunks/node_modules_@clerk_nextjs_dist_esm_8c7ace._.js:146:207
    at [project]/node_modules/@clerk/nextjs/dist/esm/app-router/client/ClerkProvider.js [app-route] (ecmascript) (//.next/server/chunks/node_modules_@clerk_nextjs_dist_esm_8c7ace._.js:191:3)
    at instantiateModule (//.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (//.next/server/chunks/[turbopack]_runtime.js:572:12)
    at esmImport (//.next/server/chunks/[turbopack]_runtime.js:122:20)
    at //.next/server/chunks/node_modules_@clerk_nextjs_dist_esm_8c7ace._.js:924:198
    at [project]/node_modules/@clerk/nextjs/dist/esm/app-router/server/ClerkProvider.js [app-route] (ecmascript) (//.next/server/chunks/node_modules_@clerk_nextjs_dist_esm_8c7ace._.js:943:3)
    at instantiateModule (//.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (//.next/server/chunks/[turbopack]_runtime.js:572:12)
    at esmImport (//.next/server/chunks/[turbopack]_runtime.js:122:20)
    at //.next/server/chunks/node_modules_@clerk_nextjs_dist_esm_8c7ace._.js:1002:198
    at [project]/node_modules/@clerk/nextjs/dist/esm/components.server.js [app-route] (ecmascript) <exports> (//.next/server/chunks/node_modules_@clerk_nextjs_dist_esm_8c7ace._.js:1007:3)
    at instantiateModule (//.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (//.next/server/chunks/[turbopack]_runtime.js:572:12)
    at esmImport (//.next/server/chunks/[turbopack]_runtime.js:122:20)
    at //.next/server/chunks/node_modules_@clerk_nextjs_dist_esm_8c7ace._.js:1018:195
    at [project]/node_modules/@clerk/nextjs/dist/esm/components.server.js [app-route] (ecmascript) <facade> (//.next/server/chunks/node_modules_@clerk_nextjs_dist_esm_8c7ace._.js:1021:3)
    at instantiateModule (//.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (//.next/server/chunks/[turbopack]_runtime.js:572:12)
    at esmImport (//.next/server/chunks/[turbopack]_runtime.js:122:20)
    at //.next/server/chunks/node_modules_@clerk_nextjs_dist_esm_8c7ace._.js:1668:194
    at [project]/node_modules/@clerk/nextjs/dist/esm/index.js [app-route] (ecmascript) <locals> (//.next/server/chunks/node_modules_@clerk_nextjs_dist_esm_8c7ace._.js:1690:3)
    at instantiateModule (//.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (//.next/server/chunks/[turbopack]_runtime.js:572:12)
    at esmImport (//.next/server/chunks/[turbopack]_runtime.js:122:20)
    at //.next/server/chunks/_86e9fa._.js:56:179
    at [project]/src/server/api/trpc.ts [app-route] (ecmascript) (//.next/server/chunks/_86e9fa._.js:119:3)
    at instantiateModule (//.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (//.next/server/chunks/[turbopack]_runtime.js:572:12)
    at esmImport (//.next/server/chunks/[turbopack]_runtime.js:122:20)
    at //.next/server/chunks/_86e9fa._.js:11614:134
    at asyncModule (//.next/server/chunks/[turbopack]_runtime.js:279:5)
    at //.next/server/chunks/_86e9fa._.js:11610:1
    at [project]/src/server/api/root.ts [app-route] (ecmascript) (//.next/server/chunks/_86e9fa._.js:11711:3)
    at instantiateModule (//.next/server/chunks/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (//.next/server/chunks/[turbopack]_runtime.js:572:12)
    at esmImport (//.next/server/chunks/[turbopack]_runtime.js:122:20)
    at //.next/server/chunks/_86e9fa._.js:11722:134
    at asyncModule (//.next/server/chunks/[turbopack]_runtime.js:279:5)
    at //.next/server/chunks/_86e9fa._.js:11715:1 {
  page: '/api/trpc/users.get'
}

Environment

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 75.30 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.volta/tools/image/node/20.11.0/bin/node
    Yarn: 1.22.18 - ~/.volta/tools/image/yarn/1.22.18/bin/yarn
    npm: 10.2.4 - ~/.volta/tools/image/node/20.11.0/bin/npm
    pnpm: 8.5.0 - ~/Library/pnpm/pnpm
    bun: 1.0.1 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 106.1.44.105
    Chrome: 123.0.6312.122
    Safari: 17.4.1
  npmPackages:
    @aws-sdk/client-s3: 3.554.0 => 3.554.0
    @aws-sdk/s3-presigned-post: 3.554.0 => 3.554.0
    @aws-sdk/s3-request-presigner: 3.554.0 => 3.554.0
    @aws-sdk/signature-v4-crt: 3.552.0 => 3.552.0
    @clerk/clerk-sdk-node: 4.13.14 => 4.13.14
    @clerk/nextjs: 4.29.12 => 4.29.12
    @clerk/themes: 1.7.12 => 1.7.12
    @dnd-kit/core: 6.1.0 => 6.1.0
    @dnd-kit/sortable: 8.0.0 => 8.0.0
    @faker-js/faker: 8.4.1 => 8.4.1
    @hookform/resolvers: 3.3.4 => 3.3.4
    @jsonurl/jsonurl: 1.1.7 => 1.1.7
    @mantine/core: 7.7.2 => 7.7.2
    @mantine/dates: 7.7.2 => 7.7.2
    @mantine/dropzone: 7.7.2 => 7.7.2
    @mantine/hooks: 7.7.2 => 7.7.2
    @mantine/modals: 7.7.2 => 7.7.2
    @mantine/notifications: 7.7.2 => 7.7.2
    @mantine/tiptap: 7.7.2 => 7.7.2
    @neondatabase/serverless: 0.9.0 => 0.9.0
    @react-email/components: 0.0.16 => 0.0.16
    @sentry/nextjs: ^7.110.0 => 7.110.0
    @tabler/icons-react: 3.2.0 => 3.2.0
    @tanstack/react-query: ^5.29.2 => 5.29.2
    @tanstack/react-query-devtools: ^5.29.2 => 5.29.2
    @tiptap/extension-highlight: 2.3.0 => 2.3.0
    @tiptap/extension-link: 2.3.0 => 2.3.0
    @tiptap/extension-text-align: 2.3.0 => 2.3.0
    @tiptap/extension-underline: 2.3.0 => 2.3.0
    @tiptap/pm: 2.3.0 => 2.3.0
    @tiptap/react: 2.3.0 => 2.3.0
    @tiptap/starter-kit: 2.3.0 => 2.3.0
    @trpc/client: ^11.0.0-rc.334 => 11.0.0-rc.334+fdf26e552
    @trpc/next: ^11.0.0-rc.334 => 11.0.0-rc.334+fdf26e552
    @trpc/react-query: ^11.0.0-rc.334 => 11.0.0-rc.334+fdf26e552
    @trpc/server: ^11.0.0-rc.334 => 11.0.0-rc.334+fdf26e552
    @types/eslint: 8.56.9 => 8.56.9
    @types/exceljs: ^1.3.0 => 1.3.0
    @types/inquirer: ^9.0.7 => 9.0.7
    @types/node: 20.12.7 => 20.12.7
    @types/react: 18.2.77 => 18.2.77
    @types/react-dom: 18.2.25 => 18.2.25
    @typescript-eslint/eslint-plugin: 7.6.0 => 7.6.0
    @typescript-eslint/parser: 7.6.0 => 7.6.0
    @upstash/qstash: ^2.4.3 => v2.4.3
    chart.js: ^4.4.2 => 4.4.2
    chartjs-adapter-dayjs-4: 1.0.4 => 1.0.4
    cookies-next: 4.1.1 => 4.1.1
    csv-parse: ^5.5.5 => 5.5.5
    cypress: 13.7.3 => 13.7.3
    dayjs: 1.11.10 => 1.11.10
    dotenv: 16.4.5 => 16.4.5
    drizzle-kit: 0.20.14 => 0.20.14
    drizzle-orm: 0.30.8 => 0.30.8
    drizzle-zod: 0.5.1 => 0.5.1
    encoding: 0.1.13 => 0.1.13
    eslint: 8.57.0 => 8.57.0
    eslint-config-next: 14.2.0 => 14.2.0
    eslint-config-prettier: ^9.1.0 => 9.1.0
    exceljs: ^4.4.0 => 4.4.0
    export-to-csv: ^1.2.4 => 1.2.4
    i18next: 23.11.1 => 23.11.1
    inquirer: ^9.2.17 => 9.2.17
    is-what: ^4.1.16 => 4.1.16
    jsdom: ^24.0.0 => 24.0.0
    libphonenumber-js: ^1.10.60 => 1.10.60
    lottie-react: 2.4.0 => 2.4.0
    mantine-react-table: 2.0.0-beta.1 => 2.0.0-beta.1
    next: 14.1.4 => 14.1.4
    next-test-api-route-handler: ^4.0.5 => 4.0.5
    openai: ^4.33.0 => 4.33.0
    pg: 8.11.5 => 8.11.5
    posthog-js: ^1.121.1 => 1.121.1
    posthog-node: ^4.0.0 => 4.0.0
    prettier: 3.2.5 => 3.2.5
    react: 18.2.0 => 18.2.0
    react-chartjs-2: ^5.2.0 => 5.2.0
    react-dom: 18.2.0 => 18.2.0
    react-hook-form: 7.51.3 => 7.51.3
    react-i18next: 14.1.0 => 14.1.0
    react-international-phone: ^4.2.6 => 4.2.6
    resend: ^3.2.0 => 3.2.0
    sharp: ^0.33.3 => 0.33.3
    superjson: 2.2.1 => 2.2.1
    typescript: 5.4.5 => 5.4.5
    vitest: 1.5.0 => 1.5.0
    zod: 3.22.4 => 3.22.4
    zustand: 4.5.2 => 4.5.2

Answer 1 · 2024-04-12T16:55:33.000Z

Hello @AlonMiz , thanks for the report.

It looks like something prevents tree-shaking from working when next builds the server modulel. I'd like to ask a few questions that will help the team further debug this one:

In the file that throws the error, are you importing the Clerk helpers from @clerk/nextjs or @clerk/nextjs/server? Could you try importing from /server and see if that resolves your issue?
Does this work if you switch to webpack by removing the --turbo flag?
Did your exact setup work with next@14.1?

It'd be great if you could share a minimum reproduction as you are using many different libs (Clerk, tRPC, Next, Turbo) that could affect how modules are resolved.

Thank you!

Answer 2 · 2024-04-13T18:10:50.000Z

I experienced the same issue when updating to next@14.2.0 when importing from @clerk/nextjs in api route handlers.
My exact setup did work with next@14.1.4 using the --turbo flag.

I can confirm that both solutions mentioned by @nikosdouvlis:
importing from @clerk/nextjs/server in api route handlers,
or removing the --turbo flag,
along with both solutions combined, resolved the error in my use case.

Answer 3 · 2024-04-13T19:33:06.000Z

just a note here, I had the same on a simple project, without trpc. (so just 14.2, clerk + turbo ). i confirmed it only happens when you --turbo

Answer 4 · 2024-04-14T10:19:30.000Z

Hello @AlonMiz , thanks for the report.

It looks like something prevents tree-shaking from working when next builds the server modulel. I'd like to ask a few questions that will help the team further debug this one:

In the file that throws the error, are you importing the Clerk helpers from @clerk/nextjs or @clerk/nextjs/server? Could you try importing from /server and see if that resolves your issue?

Does this work if you switch to webpack by removing the --turbo flag?

Did your exact setup work with next@14.1?

It'd be great if you could share a minimum reproduction as you are using many different libs (Clerk, tRPC, Next, Turbo) that could affect how modules are resolved.

Thank you!

adding /server doesn't help
yes, without the --turbo it does help
yes only on next 14.2 it stops working

Answer 5 · 2024-04-16T05:15:24.000Z

Is there any progress on this issue? We've encountered numerous problems with Clerk since upgrading to App Router over the past few months. Due to these ongoing issues, we are starting to seriously consider other alternatives on the market.

Additionally, I've verified that appending /server to the configuration does not resolve the issue. I also attempted to upgrade to Clerk Core 2 Beta, but we continue to face the same challenges. Although removing the --turbo flag does mitigate the problem, it significantly increases our page load times by several seconds, which is not a viable solution for us.

Answer 6 · 2024-04-16T16:41:32.000Z

@DennizSvens would you be able to email support@clerk.dev with some of the other problems you're running into with Clerk and App Router? You can reference this issue and we'll follow up.

Unfortunately no updates on this specific issue yet. We'll provide an update when someone from the team has started investigating. We know --turbo is a significant performance improvement to Next's dev server, so we want to make sure Clerk works with it when turbo is stable. 🙏

Answer 7 · 2024-04-22T14:05:28.000Z

UPDATE
latest clerk + latest next js does compile (seems like turbopack fixed something on their side)

    "@clerk/clerk-sdk-node": "5.0.0",
    "@clerk/nextjs": "5.0.1",
    "@clerk/themes": "2.0.0",
    "next": "14.2.2",

Answer 8 · 2024-04-23T08:56:28.000Z

Hello @AlonMiz ,
Why do you use both "@clerk/clerk-sdk-node" and "@clerk/nextjs"?

Answer 9 · 2024-04-23T09:16:23.000Z

Hello @AlonMiz , Why do you use both "@clerk/clerk-sdk-node" and "@clerk/nextjs"?

great question
i needed some types, specifically
RedirectUrlJSON and Organization that I couldn't find easily in @clerk/nextjs
now I also notice that there's no clerkClient in the next js package :/ so this would probably be a pretty bad for me loading those two bundles

also, I have another issue now working with cypress
clerk/clerk-cypress-nextjs#7

Answer 10 · 2024-04-23T10:31:01.000Z

Hello @AlonMiz , Why do you use both "@clerk/clerk-sdk-node" and "@clerk/nextjs"?

great question i needed some types, specifically RedirectUrlJSON and Organization that I couldn't find easily in @clerk/nextjs now I also notice that there's no clerkClient in the next js package :/ so this would probably be a pretty bad for me loading those two bundles

also, I have another issue now working with cypress clerk/example-cypress-nextjs#7

You can now import the Organization from the @clerk/nextjs/server. What is your use case related to the RedirectUrlJSON?

About the cypress issue we will investigate it and reply in the related GH issue.

Answer 11 · 2024-04-23T11:47:06.000Z

UPDATE latest clerk + latest next js does compile (seems like turbopack fixed something on their side)
    "@clerk/clerk-sdk-node": "5.0.0",
    "@clerk/nextjs": "5.0.1",
    "@clerk/themes": "2.0.0",
    "next": "14.2.2",

v5 is basically a whole new Core, and as such not everyone will want to use it.
Is there not a backport fix for the v4 line ?

Answer 12 · 2024-04-29T14:59:33.000Z

Hello @AlonMiz , Why do you use both "@clerk/clerk-sdk-node" and "@clerk/nextjs"?

great question i needed some types, specifically RedirectUrlJSON and Organization that I couldn't find easily in @clerk/nextjs now I also notice that there's no clerkClient in the next js package :/ so this would probably be a pretty bad for me loading those two bundles
also, I have another issue now working with cypress clerk/example-cypress-nextjs#7

You can now import the Organization from the @clerk/nextjs/server. What is your use case related to the RedirectUrlJSON?

About the cypress issue we will investigate it and reply in the related GH issue.

thanks, I hope this gets fixed soon, as I was planning to upgrade the core API already.

regarding the RedirectUrlJSON, I am creating an actor token for impersonation. and I couldn't find the return type that matches

  const res = await fetch('https://api.clerk.com/v1/actor_tokens', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${env.CLERK_SECRET_KEY}`,
    },
    body: JSON.stringify({
      user_id: userIdToImpersonate,
      expires_in_seconds: 600,
      actor: {
        sub: userId,
      },
    }),
  });
  const actorToken = (await res.json()) as RedirectUrlJSON;

Answer 13 · 2024-04-30T07:14:17.000Z

Hi!

I'm closing this again since the original issue got fixed / fixed itself. In order to properly track your request and others we must make sure that issues are not mixed together and multiple people are not talking about different things in a singular issue. It also makes it harder to actually fix in the end since things like minimal reproductions are missing again.

Please open a new issue about your type issues. Thanks!