Clerk fails to get the publishable key from the environment variables in Next.js 13

Question

I have a site I've built with Next 13 (experimental app directory) and have integrated authentication in my site with Clerk.

Everything works well on my local environment. When deployed to Netlify, it builds just fine, but if I try to visit the site it doesn't load, and in the console I see the following error:

@clerk/nextjs: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.
    at Object.throwMissingPublishableKeyError

I do have my publishable key in my environment variables in Netlify under NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY. I've also placed it under CLERK_PUBLISHABLE_KEY just in case.

Also, does it supposed to get scoped automatically by some clerk code? Because in my code I don't really use that variable anywhere and don't see the documentation telling me I need to.

Answer 1

I had the same problem and to fix it i just went to the file with the declaration of ClerkProvider and added the publishable key.

function ContextProviders({ children, pageProps }) {
    return (
            <ClerkProvider {...pageProps} publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}>
              {children}
            </ClerkProvider>

    )
}

export default ContextProviders

Answer 2

Solved it by moving .env.local to the root directory of the project.