Double Quote in ENV VAR cause 500 in NextJS production builds

[verdverm]

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

n/a

Publishable key

pk_test_bWFqb3ItZ29waGVyLTY0LmNsZXJrLmFjY291bnRzLmRldiQ

Description

Steps to reproduce:

1. Production build of NextJS
2. Have " end up in the ENV var

I deployed my production build to Kubernetes, and in the process of creating the secret from a .env file, the actual value contained the double quotes from the .env file in-cluster

From running env in bash in the container

CLERK_SECRET_KEY="sk_test_6o..."

Expected behavior:

1. A clearer error, if possible?
2. detect and strip the quotes, more resilient

Actual behavior:

500 on the website homepage with little error context

I looked into chunk/167.js and noticed clerk domains.

Eventually the atob function was the breadcrumb that led to look at the values of the vars.

DOMException [InvalidCharacterError]: Invalid character
    at new DOMException (node:internal/per_context/domexception:53:5)
    at __node_internal_ (node:internal/util:695:10)
    at atob (node:buffer:1330:13)
    at u (/app/.next/server/chunks/167.js:1:797)
    at /app/.next/server/chunks/167.js:1:991
    at h (/app/.next/server/chunks/167.js:1:1040)
    at t0 (/app/.next/server/chunks/167.js:5:44563)
    at 14452 (/app/.next/server/chunks/452.js:1:1558)
    at t (/app/.next/server/webpack-runtime.js:1:127)
    at 50854 (/app/.next/server/chunks/13.js:1:10880)
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: '1890365856'
}

Environment

This is a `standalone` build...
 
In container:
 
  System:
    OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (2) x64 Intel(R) Xeon(R) CPU @ 2.30GHz
    Memory: 5.93 GB / 7.28 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
  npmPackages:
    @opentelemetry/api: 1.7.0 => 1.7.0
    @prisma/client: 5.7.1 => 5.7.1
    esbuild: ^0.20.0 => 0.20.0
    mdast-util-to-string: ^4.0.0 => 4.0.0
    mdx-bundler: ^10.0.1 => 10.0.1
    next: ^14.1.0 => 14.1.0
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    sharp: 0.32.6 => 0.32.6
    unist-util-visit: ^5.0.0 => 5.0.0
    webpack: 5.89.0 => 5.89.0

List of package version

yarn envinfo --npmPackages
yarn run v1.22.21
$ /Users/tony/ts/webapp/node_modules/.bin/envinfo --npmPackages
 
  npmPackages:
    @babel/core: ^7.23.3 => 7.24.3
    @babel/plugin-syntax-flow: ^7.23.3 => 7.24.1
    @babel/plugin-transform-optional-chaining: ^7.23.4 => 7.24.1
    @babel/plugin-transform-react-jsx: ^7.23.4 => 7.23.4
    @clerk/clerk-sdk-node: ^4.13.11 => 4.13.11
    @clerk/nextjs: ^4.29.9 => 4.29.9
    @dagger.io/dagger: 0.9.10 => 0.9.10
    @jest/globals: ^29.7.0 => 29.7.0
    @mdx-js/loader: ^3.0.0 => 3.0.1
    @mdx-js/react: ^3.0.0 => 3.0.1
    @mdxeditor/editor: ^2.3.4 => 2.16.0
    @next/bundle-analyzer: ^14.0.3 => 14.1.4
    @next/mdx: ^14.1.0 => 14.1.4
    @opentelemetry/api: 1.7.0 => 1.7.0
    @opentelemetry/resources: 1.18.1 => 1.18.1
    @opentelemetry/sdk-node: 0.45.1 => 0.45.1
    @opentelemetry/sdk-trace-node: 1.18.1 => 1.18.1
    @opentelemetry/semantic-conventions: 1.18.1 => 1.18.1
    @playwright/test: ^1.40.0 => 1.42.1
    @prisma/client: 5.7.1 => 5.7.1
    @radix-ui/react-accordion: ^1.1.2 => 1.1.2
    @radix-ui/react-checkbox: ^1.0.4 => 1.0.4
    @radix-ui/react-dialog: ^1.0.5 => 1.0.5
    @radix-ui/react-dropdown-menu: ^2.0.6 => 2.0.6
    @radix-ui/react-form: ^0.0.3 => 0.0.3
    @radix-ui/react-icons: ^1.3.0 => 1.3.0
    @radix-ui/react-label: ^2.0.2 => 2.0.2
    @radix-ui/react-popover: ^1.0.7 => 1.0.7
    @radix-ui/react-radio-group: ^1.1.3 => 1.1.3
    @radix-ui/react-scroll-area: ^1.0.5 => 1.0.5
    @radix-ui/react-select: 2.0.0 => 2.0.0
    @radix-ui/react-slider: ^1.1.2 => 1.1.2
    @radix-ui/react-slot: ^1.0.2 => 1.0.2
    @radix-ui/react-switch: ^1.0.3 => 1.0.3
    @radix-ui/react-tabs: ^1.0.4 => 1.0.4
    @radix-ui/react-toast: ^1.1.5 => 1.1.5
    @radix-ui/react-toggle: ^1.0.3 => 1.0.3
    @radix-ui/react-toggle-group: ^1.0.4 => 1.0.4
    @radix-ui/react-tooltip: ^1.0.7 => 1.0.7
    @semantic-release/changelog: ^6.0.3 => 6.0.3
    @semantic-release/commit-analyzer: ^11.1.0 => 11.1.0
    @semantic-release/git: ^10.0.1 => 10.0.1
    @semantic-release/github: ^9.2.3 => 9.2.6
    @semantic-release/npm: ^11.0.1 => 11.0.3
    @semantic-release/release-notes-generator: ^12.1.0 => 12.1.0
    @storybook/addon-essentials: ^7.5.3 => 7.6.17
    @storybook/addon-interactions: ^7.5.3 => 7.6.17
    @storybook/addon-links: ^7.5.3 => 7.6.17
    @storybook/blocks: ^7.5.3 => 7.6.17
    @storybook/nextjs: ^7.5.3 => 7.6.17
    @storybook/react: ^7.5.3 => 7.6.17
    @storybook/test-runner: ^0.15.2 => 0.15.2
    @storybook/testing-library: ^0.2.2 => 0.2.2
    @t3-oss/env-nextjs: ^0.7.1 => 0.7.3
    @tailwindcss/typography: ^0.5.10 => 0.5.10
    @testing-library/jest-dom: ^6.1.4 => 6.4.2
    @testing-library/react: ^14.1.2 => 14.2.2
    @total-typescript/ts-reset: ^0.5.1 => 0.5.1
    @types/jest: ^29.5.10 => 29.5.12
    @types/lodash: ^4.14.202 => 4.17.0
    @types/mdx: ^2.0.10 => 2.0.12
    @types/node: ^20.10.7 => 20.11.30
    @types/react: ^18.2.38 => 18.2.69
    @types/react-dom: ^18.2.17 => 18.2.22
    @typescript-eslint/eslint-plugin: ^6.12.0 => 6.21.0
    @typescript-eslint/parser: ^6.12.0 => 6.21.0
    @vercel/otel: ^0.3.0 => 0.3.0
    all-contributors-cli: ^6.26.1 => 6.26.1
    autoprefixer: ^10.4.16 => 10.4.19
    class-variance-authority: ^0.7.0 => 0.7.0
    clsx: ^2.1.0 => 2.1.0
    commander: ^11.1.0 => 11.1.0
    cross-env: ^7.0.3 => 7.0.3
    date-fns: ^3.3.1 => 3.6.0
    esbuild: ^0.20.0 => 0.20.2
    eslint: 8.54.0 => 8.54.0
    eslint-config-next: 14.0.3 => 14.0.3
    eslint-config-prettier: ^9.0.0 => 9.1.0
    eslint-config-react-app: ^7.0.1 => 7.0.1
    eslint-plugin-import: ^2.29.0 => 2.29.1
    eslint-plugin-react: 7.33.2 => 7.33.2
    eslint-plugin-storybook: ^0.6.15 => 0.6.15
    eslint-plugin-tailwindcss: ^3.13.0 => 3.15.1
    fetch-mock: ^9.11.0 => 9.11.0
    github-slugger: ^2.0.0 => 2.0.0
    gzip-size: 6 => 6.0.0
    jest: ^29.7.0 => 29.7.0
    jest-environment-jsdom: ^29.7.0 => 29.7.0
    lodash: ^4.17.21 => 4.17.21
    lucide-react: ^0.307.0 => 0.307.0
    mdast-util-to-string: ^4.0.0 => 4.0.0
    mdx: ^0.3.1 => 0.3.1
    mdx-bundler: ^10.0.1 => 10.0.1
    mkdirp: ^3.0.1 => 3.0.1
    next: ^14.1.0 => 14.1.4
    next-compose-plugins: ^2.2.1 => 2.2.1
    next-themes: ^0.2.1 => 0.2.1
    npm-only-allow: ^1.2.6 => 1.2.6
    patch-package: ^8.0.0 => 8.0.0
    postcss: ^8.4.31 => 8.4.38
    postinstall-postinstall: ^2.1.0 => 2.1.0
    prettier: 3.0.3 => 3.0.3
    prettier-plugin-tailwindcss: ^0.5.7 => 0.5.12
    prisma: ^5.7.1 => 5.11.0
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    semantic-release: ^22.0.8 => 22.0.12
    sharp: 0.32.6 => 0.32.6
    sonner: ^1.3.1 => 1.4.41
    storybook: ^7.5.3 => 7.6.17
    stripe: ^14.12.0 => 14.22.0
    svix: ^1.15.0 => 1.21.0
    tailwind-merge: ^2.0.0 => 2.2.2
    tailwindcss: ^3.3.5 => 3.4.1
    tailwindcss-animate: ^1.0.7 => 1.0.7
    tailwindcss-typography: ^3.1.0 => 3.1.0
    ts-jest: ^29.1.1 => 29.1.2
    tsx: ^4.7.1 => 4.7.1
    typescript: ^5.3.3 => 5.4.3
    unist-util-visit: ^5.0.0 => 5.0.0
    webpack: 5.89.0 => 5.89.0
    zod: ^3.22.4 => 3.22.4
    zustand: ^4.5.0 => 4.5.2

[octoper]

Hello @verdverm!
I haven't managed to replicate the issue, I've tried it and the environment variables seems to load as expected, can you provide a minimal reproduction so I can have a better look at it?
Also it's not so clear if that's a Clerk of Next.js issue, as we are depending on Next.js to load the variables, we don't do any parsing of the environment variables.

[alexisveryreal]

Thank you @verdverm , I was getting the same error and was losing my mind. Changing the env variables in Vercel fixed it for me

[octoper]

Happy to hear that you've resolved this!
I will be closing this to keep our issues tidied, but feel free to re-open it.