\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup>\r\nconst config = useRuntimeConfig();\r\nconsole.log(config);\r\n\u003C/script>\r\n\r\n```\r\n\r\nNow, when I build the project using `yarn build` and then run the production build using `node .output/server/index.mjs`, I get the following output:\r\n\r\n```shell\r\n~/projects/nuxt-starter-ilkcf5 6s\r\n❯ node .output/server/index.mjs\r\nListening http://[::]:3000\r\n{\r\n app: { baseURL: '/', buildAssetsDir: '/_nuxt/', cdnURL: '' },\r\n nitro: { routeRules: { '/__nuxt_error': [Object] }, envPrefix: 'NUXT_' },\r\n public: { apiBaseUrl: '' }\r\n}\r\n```\r\n\r\nNotice that the `config` variable that is getting logged in `app.vue` has a public key of `apiBaseUrl` as `\"\"` as opposed to `http://localhost:8000` as defined in the `.env` file.\r\n\r\nNOTE that this is not an issue when running `yarn dev`.\r\n\r\nJust want to know if this is really a bug or am I missing a step here.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n```shell\r\n~/projects/nuxt-starter-ilkcf5 6s\r\n❯ node .output/server/index.mjs\r\nListening http://[::]:3000\r\n{\r\n app: { baseURL: '/', buildAssetsDir: '/_nuxt/', cdnURL: '' },\r\n nitro: { routeRules: { '/__nuxt_error': [Object] }, envPrefix: 'NUXT_' },\r\n public: { apiBaseUrl: '' }\r\n}\r\n```\r\n",[2061,2064],{"name":2062,"color":2063},"3.x","29bc7f",{"name":1985,"color":1986},15696,"Environment variables not synced from `.env` file on production build.","2023-01-19T18:20:11Z","https://github.com/nuxt/nuxt/issues/15696",0.65770704,{"labels":2071,"number":2077,"owner":1988,"repository":1988,"state":2001,"title":2078,"updated_at":2079,"url":2080,"score":2081},[2072,2075,2076],{"name":2073,"color":2074},"stale","ffffff",{"name":1985,"color":1986},{"name":1998,"color":1999},10345,"Cannot read properties of undefined (reading 'stubModule')","2023-01-22T15:48:28Z","https://github.com/nuxt/nuxt/issues/10345",0.6599223,{"description":2083,"labels":2084,"number":2087,"owner":1988,"repository":1988,"state":2001,"title":2088,"updated_at":2089,"url":2090,"score":2091},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v14.20.1`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@9.1.1`\r\n- Builder: `vite`\r\n- User Config: `modules`, `tailwindcss`, `css`, `runtimeConfig`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.1.3`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\n```\r\n//package.json\r\n{\r\n \"private\": true,\r\n \"scripts\": {\r\n \"build\": \"nuxt build\",\r\n \"dev\": \"nuxt dev\",\r\n \"generate\": \"nuxt generate\",\r\n \"preview\": \"nuxt preview\",\r\n \"postinstall\": \"nuxt prepare\"\r\n },\r\n \"devDependencies\": {\r\n \"@nuxtjs/google-fonts\": \"^3.0.0-1\",\r\n \"@nuxtjs/tailwindcss\": \"^6.1.3\",\r\n \"@tailwindcss/typography\": \"^0.5.8\",\r\n \"nuxt\": \"3.0.0\"\r\n },\r\n \"dependencies\": {\r\n \"airtable\": \"^0.11.5\"\r\n }\r\n}\r\n```\r\n\r\n```\r\n// nuxt.config.ts\r\n// https://v3.nuxtjs.org/api/configuration/nuxt.config\r\nexport default defineNuxtConfig({\r\n// { ... }\r\n runtimeConfig: {\r\n public: {\r\n atApikey: process.env.NUXT_AT_API_KEY,\r\n atEndpointUrl: 'https://api.airtable.com',\r\n atBaseId: process.env.NUXT_AT_BASE_ID,\r\n }\r\n }\r\n})\r\n\r\n```\r\n```\r\n// ./composables/airtable.js\r\nimport Airtable from \"airtable\";\r\n\r\nconst apiKey = useRuntimeConfig().public.atApikey;\r\nconsole.log('apikey', apiKey) //this does print the key to the console\r\n// this works with hardcoded apikey regardless of browser refresh as long as I remove the reference to `useRuntimeConfig()` otherwise also gives the same error\r\nconst base = new Airtable({ apiKey: 'myapiKey' }).base(\r\n 'appU8bucIO9xC3CCS',\r\n);\r\n// using the const here only works until I refresh the browser \r\n// const base = new Airtable({ apiKey: apiKey }).base(\r\n// 'appU8bucIO9xC3CCS',\r\n// );\r\n```\r\n\r\n### Describe the bug\r\n\r\n(Apologies in advance if there is a lack of correct terminology) \r\n\r\nI need to pull data from an Airtable base. The apiKey is stored in a `.env` and defined in the `runtimeConfig` option of the `nuxt.config.ts` file as shown above. \r\n\r\nIn the composable file and the page importing the composable file, I get the data initially but the moment I refresh the browser I get the Nuxt instance unavailable error.\r\n\r\nI am extremely new to Nuxt in general so I have had some confusion around how to get access to the runtimeConfig but as I did initially get the data I believe I was on the right path.\r\n\r\nTesting with the apikey hardcoded directly into the Airtable config know the composable causes no problems on refresh.\r\n\r\nWhat am I missing? \r\n\r\nTIA\r\n\r\n### Additional context\r\n\r\n***EDIT: I've discovered that I can get the runtime config inside the function as long as the env var isn't named apikey in any way because Nuxt is smart enough to prevent us from exposing them.\r\n\r\nInput\r\n```\r\nconst config = useRuntimeConfig().public; // gets all configs\r\nconst atApiKey = useRuntimeConfig().public.atApiKey // doesn't read\r\nconst atBaseId = useRuntimeConfig().public.atBaseId // does read\r\nconsole.log('config', config) // prints all to console\r\nconsole.log('public apiKey', config.atApiKey) // undefined\r\nconsole.log('public token', config.atToken) // prints \r\nconsole.log('baseId', config.atBaseId) // prints\r\nconsole.log('atBaseId', atBaseId) // prints\r\nconsole.log('apikey', atApiKey) // undefined\r\n```\r\n\r\noutput\r\n\u003Cimg width=\"948\" alt=\"Screenshot 2022-11-19 at 07 24 15\" src=\"https://user-images.githubusercontent.com/48051095/202839914-f592631a-4c0b-452f-ba3c-05a704df5a61.png\">\r\n\r\nI need to change how I get the secret API key, so can someone please point me to some documentation that will help me get this right?\r\n\r\n### Logs\r\n\r\n```shell\r\nError: nuxt instance unavailable 17:35:10\r\n at useNuxtApp (/Users/sueholder/Development/Nuxt3/absoluteSport/webapp/node_modules/nuxt/dist/app/nuxt.mjs:165:13)\r\n at Module.useRuntimeConfig (/Users/sueholder/Development/Nuxt3/absoluteSport/webapp/node_modules/nuxt/dist/app/nuxt.mjs:173:10)\r\n at /Users/sueholder/Development/Nuxt3/absoluteSport/webapp/composables/getParties.js:5:38\r\n at processTicksAndRejections (internal/process/task_queues.js:95:5)\r\n at async ViteNodeRunner.directRequest (file:///Users/sueholder/Development/Nuxt3/absoluteSport/webapp/node_modules/vite-node/dist/client.mjs:270:5)\r\n at async ViteNodeRunner.cachedRequest (file:///Users/sueholder/Development/Nuxt3/absoluteSport/webapp/node_modules/vite-node/dist/client.mjs:146:12)\r\n at async request (file:///Users/sueholder/Development/Nuxt3/absoluteSport/webapp/node_modules/vite-node/dist/client.mjs:169:16)\r\n at async /Users/sueholder/Development/Nuxt3/absoluteSport/webapp/pages/index.vue:3:31\r\n at async ViteNodeRunner.directRequest (file:///Users/sueholder/Development/Nuxt3/absoluteSport/webapp/node_modules/vite-node/dist/client.mjs:270:5)\r\n at async ViteNodeRunner.cachedRequest (file:///Users/sueholder/Development/Nuxt3/absoluteSport/webapp/node_modules/vite-node/dist/client.mjs:146:12)\r\n```\r\n",[2085,2086],{"name":2062,"color":2063},{"name":1985,"color":1986},15545,"Error: Nuxt Instance unavailable - when accessing env variables with useRuntimeConfig() ","2023-05-18T10:07:13Z","https://github.com/nuxt/nuxt/issues/15545",0.66051537,["Reactive",2093],{},["Set"],["ShallowReactive",2096],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"vPuTaY76e5Ck9O-PYiLGfZ5jxChjhYXQdkF2PrG3fAo":-1},"/nuxt/nuxt/27473"]