Error: Nuxt Instance unavailable - when accessing env variables with useRuntimeConfig()

[SPH73]

Environment

• Operating System: Darwin
• Node Version: v14.20.1
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: [email protected]
• Builder: vite
• User Config: modules, tailwindcss, css, runtimeConfig
• Runtime Modules: @nuxtjs/[email protected]
• Build Modules: -

Reproduction

//package.json
{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/google-fonts": "^3.0.0-1",
    "@nuxtjs/tailwindcss": "^6.1.3",
    "@tailwindcss/typography": "^0.5.8",
    "nuxt": "3.0.0"
  },
  "dependencies": {
    "airtable": "^0.11.5"
  }
}

// nuxt.config.ts
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
// { ... }
   runtimeConfig: {
    public: {
      atApikey: process.env.NUXT_AT_API_KEY,
      atEndpointUrl: 'https://api.airtable.com',
      atBaseId: process.env.NUXT_AT_BASE_ID,
    }
  }
})

// ./composables/airtable.js
import Airtable from "airtable";

const apiKey = useRuntimeConfig().public.atApikey;
console.log('apikey', apiKey) //this does print the key to the console
// this works with hardcoded apikey regardless of browser refresh as long as I remove the reference to `useRuntimeConfig()` otherwise also gives the same error
const base = new Airtable({ apiKey: 'myapiKey' }).base(
    'appU8bucIO9xC3CCS',
);
// using the const here only works until I refresh the browser 
// const base = new Airtable({ apiKey: apiKey }).base(
//     'appU8bucIO9xC3CCS',
// );

Describe the bug

(Apologies in advance if there is a lack of correct terminology)

I 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.

In 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.

I 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.

Testing with the apikey hardcoded directly into the Airtable config know the composable causes no problems on refresh.

What am I missing?

TIA

Additional context

***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.

Input

const config = useRuntimeConfig().public; // gets all configs
const atApiKey = useRuntimeConfig().public.atApiKey // doesn't read
const atBaseId = useRuntimeConfig().public.atBaseId // does read
console.log('config', config) // prints all to console
console.log('public apiKey', config.atApiKey) // undefined
console.log('public token', config.atToken) // prints 
console.log('baseId', config.atBaseId) // prints
console.log('atBaseId', atBaseId) // prints
console.log('apikey', atApiKey) // undefined

output

I 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?

Logs

Error: nuxt instance unavailable                                                                 17:35:10
    at useNuxtApp (/Users/sueholder/Development/Nuxt3/absoluteSport/webapp/node_modules/nuxt/dist/app/nuxt.mjs:165:13)
    at Module.useRuntimeConfig (/Users/sueholder/Development/Nuxt3/absoluteSport/webapp/node_modules/nuxt/dist/app/nuxt.mjs:173:10)
    at /Users/sueholder/Development/Nuxt3/absoluteSport/webapp/composables/getParties.js:5:38
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async ViteNodeRunner.directRequest (file:///Users/sueholder/Development/Nuxt3/absoluteSport/webapp/node_modules/vite-node/dist/client.mjs:270:5)
    at async ViteNodeRunner.cachedRequest (file:///Users/sueholder/Development/Nuxt3/absoluteSport/webapp/node_modules/vite-node/dist/client.mjs:146:12)
    at async request (file:///Users/sueholder/Development/Nuxt3/absoluteSport/webapp/node_modules/vite-node/dist/client.mjs:169:16)
    at async /Users/sueholder/Development/Nuxt3/absoluteSport/webapp/pages/index.vue:3:31
    at async ViteNodeRunner.directRequest (file:///Users/sueholder/Development/Nuxt3/absoluteSport/webapp/node_modules/vite-node/dist/client.mjs:270:5)
    at async ViteNodeRunner.cachedRequest (file:///Users/sueholder/Development/Nuxt3/absoluteSport/webapp/node_modules/vite-node/dist/client.mjs:146:12)