next.jsclerk

How to get rid of clerk warning in console?

I am using clerk, and I keep seeing this warning during development in my console:

Clerk: Clerk has been loaded with development keys. Development instances have strict usage limits and should not be used when deploying your application to production. Learn more: https://clerk.com/docs/deployments/overview Error Component Stack
    at ClerkContextProvider (ClerkContextProvider.tsx:20:11)
    at ClerkProviderBase (ClerkProvider.tsx:11:11)
    at Hoc (useMaxAllowedInstancesGuard.tsx:28:5)
    at ClerkNextOptionsProvider (NextOptionsContext.tsx:18:11)
    at ClientClerkProvider (ClerkProvider.tsx:27:11)
    at ClerkProvider [Server] (<anonymous>)
    at RootLayout [Server] (<anonymous>)
    at RedirectErrorBoundary (redirect-boundary.tsx:48:5)
    at RedirectBoundary (redirect-boundary.tsx:79:9)
    at NotFoundErrorBoundary (not-found-boundary.tsx:33:5)
    at NotFoundBoundary (not-found-boundary.tsx:119:3)
    at DevRootNotFoundBoundary (dev-root-not-found-boundary.tsx:20:3)
    at ReactDevOverlay (ReactDevOverlay.tsx:91:3)
    at HotReload (hot-reloader-client.tsx:523:3)
    at Router (app-router.tsx:215:9)
    at ErrorBoundaryHandler (error-boundary.tsx:69:11)
    at ErrorBoundary (error-boundary.tsx:190:3)
    at AppRouter (app-router.tsx:632:3)
    at ServerRoot (app-index.tsx:180:32)
    at Root (app-index.tsx:208:17)

I run my project using bun run dev normally, to start development environment:

// package.json
"scripts: {
  "dev": "next dev --turbopack",
}

And my environment variables are already set:

# .env.development
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= "pk_test_*****..etc"
CLERK_SECRET_KEY= "sk_test_****...etc"

And my root layout is already set with clerk provider:

import './globals.css'
import { ClerkProvider } from '@clerk/nextjs'

// ...

export default async function RootLayout({ children }: PropsWithChildren) {
  return (
    <ClerkProvider>
        <html>
          <body>
             {children}
          </body>
        </html>
    </ClerkProvider>
  )
}

But I keep seeing this warning in my console

This warning always happens in all cases, when I visit my site on:

http://localhost:3000/
http://192.168.1.118:3000/ # (my private ip)

How can I stop this warning?

Solution

  • I work at Clerk. Currently, there is no way to get rid of this warning. We added the warning because there were many instances where our users would deploy development keys to production and this would result in a less secure app that would be locked to new sign ups after a small number of users and require a stressful environment migration. Anything we can do to avoid users having to go through this makes a big difference.

    It does only show up once per time that you run your app and doesn't appear every page load or re-render though!