Invalid environment variables
I have following env var in my .env file:
and my
But I get this error:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=xxx
In my schema.mjs I have following:
export const clientSchema = z.object({
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string(),
})
export const clientSchema = z.object({
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string(),
})
client.mjs looks like this:
// @ts-check
import { clientSchema } from './schema.mjs'
/**
* You can't destruct `process.env` as a regular object, so we do
* a workaround. This is because Next.js evaluates this at build time,
* and only used environment variables are included in the build.
* @type {{ [key: string]: string | undefined; }}
*/
let clientEnv = {}
Object.keys(clientSchema.shape).forEach(
(key) => (clientEnv[key] = process.env[key]),
)
const _clientEnv = clientSchema.safeParse(clientEnv)
export const formatErrors = (
/** @type {import('zod').ZodFormattedError<Map<string,string>,string>} */
errors,
) =>
Object.entries(errors)
.map(([name, value]) => {
if (value && '_errors' in value)
return `${name}: ${value._errors.join(', ')}\n`
})
.filter(Boolean)
if (!_clientEnv.success) {
console.error(
'❌ Invalid environment variables:\n',
...formatErrors(_clientEnv.error.format()),
)
throw new Error('Invalid environment variables')
}
for (let key of Object.keys(_clientEnv.data)) {
if (!key.startsWith('NEXT_PUBLIC_')) {
console.warn(
`❌ Invalid public environment variable name: ${key}. It must begin with 'NEXT_PUBLIC_'`,
)
throw new Error('Invalid public environment variable name')
}
}
export const env = _clientEnv.data
// @ts-check
import { clientSchema } from './schema.mjs'
/**
* You can't destruct `process.env` as a regular object, so we do
* a workaround. This is because Next.js evaluates this at build time,
* and only used environment variables are included in the build.
* @type {{ [key: string]: string | undefined; }}
*/
let clientEnv = {}
Object.keys(clientSchema.shape).forEach(
(key) => (clientEnv[key] = process.env[key]),
)
const _clientEnv = clientSchema.safeParse(clientEnv)
export const formatErrors = (
/** @type {import('zod').ZodFormattedError<Map<string,string>,string>} */
errors,
) =>
Object.entries(errors)
.map(([name, value]) => {
if (value && '_errors' in value)
return `${name}: ${value._errors.join(', ')}\n`
})
.filter(Boolean)
if (!_clientEnv.success) {
console.error(
'❌ Invalid environment variables:\n',
...formatErrors(_clientEnv.error.format()),
)
throw new Error('Invalid environment variables')
}
for (let key of Object.keys(_clientEnv.data)) {
if (!key.startsWith('NEXT_PUBLIC_')) {
console.warn(
`❌ Invalid public environment variable name: ${key}. It must begin with 'NEXT_PUBLIC_'`,
)
throw new Error('Invalid public environment variable name')
}
}
export const env = _clientEnv.data
Unhandled Runtime Error
Error: Invalid environment variables
Source
src/env/client.mjs (33:8) @ eval
31 | ...formatErrors(_clientEnv.error.format()),
32 | )
> 33 | throw new Error('Invalid environment variables')
| ^
34 | }
35 |
36 | for (let key of Object.keys(_clientEnv.data)) {
Unhandled Runtime Error
Error: Invalid environment variables
Source
src/env/client.mjs (33:8) @ eval
31 | ...formatErrors(_clientEnv.error.format()),
32 | )
> 33 | throw new Error('Invalid environment variables')
| ^
34 | }
35 |
36 | for (let key of Object.keys(_clientEnv.data)) {
1 Reply
I am using it like this in my
_app.tsx
import { env } from 'src/env/client.mjs'
const MyApp: AppType<{ session: Session | null }> = ({
Component,
pageProps: { session, ...pageProps },
...rest
}) => {
return (
<StoreContext.Provider value={store}>
<SubscriptionProvider
stripePublishableKey={env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY}
>
import { env } from 'src/env/client.mjs'
const MyApp: AppType<{ session: Session | null }> = ({
Component,
pageProps: { session, ...pageProps },
...rest
}) => {
return (
<StoreContext.Provider value={store}>
<SubscriptionProvider
stripePublishableKey={env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY}
>