diff --git a/packages/nuxt/src/app/nuxt.ts b/packages/nuxt/src/app/nuxt.ts index 8222527514..3339fff931 100644 --- a/packages/nuxt/src/app/nuxt.ts +++ b/packages/nuxt/src/app/nuxt.ts @@ -382,7 +382,7 @@ export function createNuxtApp (options: CreateOptions) { // Expose runtime config const runtimeConfig = import.meta.server ? options.ssrContext!.runtimeConfig : nuxtApp.payload.config! - nuxtApp.provide('config', runtimeConfig) + nuxtApp.provide('config', import.meta.client && import.meta.dev ? wrappedConfig(runtimeConfig) : runtimeConfig) return nuxtApp } @@ -545,3 +545,20 @@ function defineGetter (obj: Record, export function defineAppConfig (config: C): C { return config } + +/** + * Configure error getter on runtime secret property access that doesn't exist on the client side + */ +function wrappedConfig (runtimeConfig: Record) { + if (!import.meta.dev || import.meta.server) { return runtimeConfig } + const keys = Object.keys(runtimeConfig).map(key => `\`${key}\``) + const lastKey = keys.pop() + return new Proxy(runtimeConfig, { + get (target, p: string, receiver) { + if (p !== 'public' && !(p in target) && !p.startsWith('__v') /* vue check for reactivity, e.g. `__v_isRef` */) { + console.warn(`[nuxt] Could not access \`${p}\`. The only available runtime config keys on the client side are ${keys.join(', ')} and ${lastKey}. See \`https://nuxt.com/docs/guide/going-further/runtime-config\` for more information.`) + } + return Reflect.get(target, p, receiver) + }, + }) +}