Nuxt•2mo ago

useRuntimeConfig empty in wrangler local preview

I am trying to read out some env vars that are present in .dev.vars and therefore in event.context.cloudflare.env. However if i try to access those secrets using useRuntimeConfig(event) they are empty. I can clrealy see that wrangler is passing them together with the request. preset: cloudflare-module nitro version: 2.11.0-20250115-115413.749f035d snippet:

// logs {NUXT_STRIPE_API_KEY: 'xxx'}
console.log(event.context.cloudflare.env)
// logs {stripe: { apiKey: ''}}
console.log(useRuntimeConfig(event))

// logs {NUXT_STRIPE_API_KEY: 'xxx'}
console.log(event.context.cloudflare.env)
// logs {stripe: { apiKey: ''}}
console.log(useRuntimeConfig(event))

9 Replies

kapa.ai•2mo ago

Hi @Timo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights into your issue with useRuntimeConfig in a Cloudflare environment. However, it's important to note that the specific scenario you're describing isn't directly addressed in the provided documents. The issue you're experiencing seems to be related to how Cloudflare's environment variables are being passed to Nuxt's runtime config system. Here are a few points to consider: 1. As mentioned in the Nuxt documentation on Runtime Config, runtime config values are automatically replaced by matching environment variables at runtime. However, this process might not be working as expected in your Cloudflare environment. 2. The pull request #26058 suggests that there might be issues with runtime config in Cloudflare, and passing the event explicitly to useRuntimeConfig is recommended. You're already doing this, which is good practice. 3. It's worth noting that the environment variables for runtime config should be prefixed with NUXT_ to be automatically picked up. In your case, NUXT_STRIPE_API_KEY should work, but it seems it's not being recognized. Given that your environment variables are present in event.context.cloudflare.env but not in useRuntimeConfig(event), it appears that there might be a disconnect between Cloudflare's environment and Nuxt's runtime config system. To troubleshoot this issue: 1. Ensure that your nuxt.config.ts file correctly defines the runtime config variables you're expecting:

   export default defineNuxtConfig({
     runtimeConfig: {
       stripe: {
         apiKey: '' // This will be overwritten by NUXT_STRIPE_API_KEY at runtime
       }
     }
   })

   export default defineNuxtConfig({
     runtimeConfig: {
       stripe: {
         apiKey: '' // This will be overwritten by NUXT_STRIPE_API_KEY at runtime
       }
     }
   })

2. Double-check that your environment variable names in .dev.vars are prefixed with NUXT_. 3. Since this seems to be a Cloudflare-specific issue, you might need to manually bridge the gap between Cloudflare's environment and Nuxt's runtime config. One possible workaround could be to manually set the runtime config values using the updateRuntimeConfig function from the Nuxt Kit, as mentioned in the Runtime Config API documentation. If these steps don't resolve the issue, it might be worth raising this as a potential bug or compatibility issue with the Nuxt team, specifically for the Cloudflare environment. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@262702731309875200> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

TimoOP•2mo ago

@kapa.ai the runtimeConfig is working fine in nuxt's dev mode and i simply copied over .env to .dev.vars - there are no issues with my nuxt config and the secret naming.

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your additional information, it seems that the issue is specific to the Cloudflare environment when using wrangler for local preview, as the runtime config works fine in Nuxt's dev mode. This suggests a potential incompatibility or configuration issue between Nuxt's runtime config system and Cloudflare's local development environment. Unfortunately, the provided knowledge sources don't contain specific information about this particular scenario with wrangler and Cloudflare local preview. However, we can infer a few points: 1. As mentioned in the Runtime Config documentation, environment variables are automatically replaced at runtime. This works in your Nuxt dev environment but not in the Cloudflare preview. 2. The pull request #26058 hints at potential issues with Cloudflare support:

Passing event explicitly when possible is good idea. Also related: unjs/nitro#2054 (in general, I'm afraid only safe point we can say cloudflare pages supports env universally, is when we can opt into Async Context)

This suggests that there might be ongoing work or known limitations with Cloudflare environments. Given that the configuration works in Nuxt's dev mode but not in wrangler's local preview, you might be encountering a limitation or bug in how wrangler handles environment variables or how it integrates with Nuxt's runtime config system. To move forward, you could: 1. Try using process.env directly instead of useRuntimeConfig in your Cloudflare environment, although this is not the ideal long-term solution. 2. Report this issue to both the Nuxt and Cloudflare teams, as it appears to be an integration problem between the two systems. 3. Keep an eye on updates to the Nuxt Cloudflare module and wrangler, as this issue might be addressed in future versions. Unfortunately, without more specific information about this interaction between Nuxt, wrangler, and Cloudflare in the knowledge sources, I can't provide a definitive solution to your problem. It would be best to reach out to the Nuxt and Cloudflare support channels with this specific use case for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@262702731309875200> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

TimoOP•2mo ago

@kapa.ai i am already explicitly passing the event down to useRuntimeConfig

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand that you're already explicitly passing the event to useRuntimeConfig. This is indeed the recommended approach, especially for server-side usage, as mentioned in the Nuxt documentation:

Giving the event as argument to useRuntimeConfig is optional, but it is recommended to pass it to get the runtime config overwritten by environment variables at runtime for server routes.

However, despite following this best practice, you're still encountering issues in the Cloudflare environment with wrangler local preview. This suggests that the problem lies deeper than just how the event is passed to useRuntimeConfig. Unfortunately, the knowledge sources provided don't contain specific information about resolving this issue in a Cloudflare environment with wrangler. The problem seems to be at the intersection of Nuxt's runtime config system and Cloudflare's way of handling environment variables in local preview mode. Given the limitations of the available information, I can't provide a definitive solution to your problem. This appears to be a specific edge case that might require attention from both the Nuxt and Cloudflare teams. For now, you might want to: 1. Double-check that your Nuxt and Cloudflare module versions are up to date, as there might have been recent fixes or improvements. 2. Consider opening an issue on the Nuxt GitHub repository, specifically mentioning this behavior in a Cloudflare environment with wrangler local preview. This could help bring attention to the problem and potentially lead to a solution. 3. As a temporary workaround, you might need to manually set the runtime config values using the environment variables from event.context.cloudflare.env, although this is not an ideal long-term solution. I apologize that I can't provide a more concrete solution based on the available information. This seems to be a complex issue that may require further investigation by the Nuxt and Cloudflare teams. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@262702731309875200> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

TimoOP•2mo ago

same issue with nitro 2.10.4 commands i am using: nuxt build --preset=cloudflare_module wrangler dev .output/server/index.mjs --assets .output/public/ same issue when i am using .dev.vars and nitro-cloudflare-dev module in nuxt dev i believe this is a bug in nitro same issue for cloudflare_pages preset 😐

Gaming

Programming

useRuntimeConfig empty in wrangler local preview

Did you find this page helpful?