Error in the Github build check related to publishableKey and prerendering pages

[busta-design]

Describe the bug I had an error in the Build, lint and type-check process. It says: @acme/nextjs:build: Error: @clerk/nextjs: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys. and @acme/nextjs:build: Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error (this error is for all the pages).

I already have a publishableKey and it is being used as a ClerkProvider prop, so I don't understand the issue.

To Reproduce Steps to reproduce the behavior:

1. Create a PR
2. Look at the Build, lint and type-check process error.

Logs

Additional context I tried to print the publishableKey in the console.log, and it was correctly printed.

[busta-design]

[jakewies]

I see this happening as well in my PR's CI. I'm trying to determine if this issue is resulting in failed Vercel builds (where the build just hangs).

[gtgaitoKu]

I am also having this issue, wondering if anyone has found any new information?

[Telos8840]

I came across this thread while troubleshooting the same issue. I'm not using this repo template, but I am running a similar CI/CD pipeline. What I did to fix this was the following:

Passed the publishableKey to the ClerkProvider

<ClerkProvider
  {...pageProps}
  publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
>

I moved the GitHub env vars into the build step instead. Based on the ci.yml in this repo, that would look like this:

- name: Build, lint and type-check
  run: pnpm turbo build lint type-check
  env:
    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
    CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}

Lastly, NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY need to be set as secrets inside your repository settings.

Hope this helps!

[humancodex]

I want to address some serious issues we are encountering in the production deployment of our solution based on Next.js, version "13.1.6". When attempting to access the page "/Admin", we encounter the following error:

Error occurred prerendering page "/Admin". Read more: https://nextjs.org/docs/messages/prerender-error Error: @clerk/nextjs: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.

Error occurred prerendering page "/marketplace". Read more: https://nextjs.org/docs/messages/prerender-error Error: @clerk/nextjs: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.

_app.js <ClerkProvider {...pageProps} publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}> <Component {...pageProps} /> It's important to note that the Clerk publishable key is fetched from the environment variables. Specifically, it should be available as NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY.

The project structure :

We are deploying on vercel

Upon further analysis, we have identified that the error lies in the absence of a publishableKey required by Clerk for the proper functioning of our application. This key is essential for authenticating and authorizing requests with Clerk.

[mackzheng]

i use "@clerk/nextjs": "^5.1.4" and https://vercel.com/

step1： if your project contain src/app your need put middleware.ts in /src/

step2： .env.local you need config
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= your_PUBLISHABLE_KEY CLERK_SECRET_KEY=your_SECRET_KEY NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

step3：
middleware.ts is like this:

import { clerkMiddleware,createRouteMatcher } from "@clerk/nextjs/server"; //const isDashboardRoute = createRouteMatcher(['/dashboard(.)']); //const isAdminRoute = createRouteMatcher(['/admin(.)']); const isPublicRoute = createRouteMatcher(['/','/sign-in(.)', '/sign-up(.)']); //you need achieve clerkMiddleware interface in the middleware.d.ts file /**

• Middleware for Next.js that handles authentication and authorization with Clerk.
• For more details, please refer to the docs: https://clerk.com/docs/references/nextjs/clerk-middleware interface ClerkMiddleware { /**
  • @example
  • export default clerkMiddleware((auth, request, event) => { ... }, options); */ (handler: ClerkMiddlewareHandler, options?: ClerkMiddlewareOptions): NextMiddleware; /**
  • @example
  • export default clerkMiddleware(options); */ (options?: ClerkMiddlewareOptions): NextMiddleware; /**
  • @example
  • export default clerkMiddleware; / (request: NextMiddlewareRequestParam, event: NextMiddlewareEvtParam): NextMiddlewareReturn; } /

export default clerkMiddleware((auth, request, event) => { if(!isPublicRoute(request)){ auth().protect(); } }, { publishableKey : your_publishableKey secretKey: your_secretKey domain:"your_domain", signInUrl:"https://your_domain/sign-in", signUpUrl:"https://your_domain/sign-up", afterSignInUrl:"https://your_domain/dashboard", afterSignUpUrl:"https://your_domain/dashboard", isSatellite: false, });

export const config = { matcher: ['/((?!.+\.[\w]+$|_next).)', '/', '/(api|trpc)(.)'], };

[elias1991xNataly]

Hi, i had the same problem because I was doing it in next's and vercel and I tried with the publishable key inside the clerk provider and didn't work. But as soon as I put the environment variables inside the deployment section of Vercel deployment everything was solved. Maybe it was a rookie mistake of not knowing that. Hope It helps.

[nekonee]

Hi @elias1991xNataly can you tell me how did you reach those settings? I'm having some issue finding this particular page based just on your screenshot. Any help would be appreciated!