Cloudflare binding issue

[Joeldorne]

Environment

I couldn't get this code to work as there's no data on 'event.req.runtime.cloudflare'. The proxy wasn't loading for me.

defineHandler(async (event) => {
  const { env } = event.req.runtime.cloudflare
  const stmt = await env.MY_D1.prepare('SELECT id FROM table')
  const { results } = await stmt.all()
})```


I added this code to the Cloudflare Proxy to debug and fix the issues:


```import { useRuntimeConfig } from "nitro/runtime-config";  
  
const proxy = await _getPlatformProxy().catch((error) => {  
  console.error("[Cloudflare Dev] Failed to initialize wrangler bindings proxy", error);  
  console.error("[Cloudflare Dev] Error details:", {  
    message: error.message,  
    stack: error.stack,  
    code: error.code  
  });  
  return _createStubProxy();  
});  
  
console.log("[Cloudflare Dev] Proxy initialized successfully");  
console.log("[Cloudflare Dev] Available env keys:", Object.keys(proxy.env));  
  
globalThis.__env__ = proxy.env;  
globalThis.__wait_until__ = proxy.ctx.waitUntil.bind(proxy.ctx);  
  
const cloudflareDevPlugin = function(nitroApp) {  
  console.log("[Cloudflare Dev] Plugin initializing");  
    
  nitroApp.hooks.hook("request", async (event) => {  
    try {  
      console.log("[Cloudflare Dev] Request hook executing for:", event.path);  
        
      event.req.context ??= {};  
        
      // Initialize runtime if it doesn't exist  
      if (!event.req.runtime) {  
        event.req.runtime = {};  
      }  
        
      // Set runtime name  
      event.req.runtime.name = "cloudflare";  
        
      // Inject cloudflare runtime with proper merging  
      event.req.runtime.cloudflare = {  
        ...(event.req.runtime.cloudflare || {}),  
        env: proxy.env,  
        context: proxy.ctx,  
      };  
        
      // Also inject into context for compatibility  
      event.req.context.cloudflare = {  
        ...(event.req.context.cloudflare || {}),  
        request: event.req,  
        env: proxy.env,  
        context: proxy.ctx,  
      };  
        
      // Bind waitUntil  
      event.req.waitUntil = proxy.ctx.waitUntil.bind(proxy.ctx);  
      event.req.cf = proxy.cf;  
        
      console.log("[Cloudflare Dev] Runtime injected successfully");  
      console.log("[Cloudflare Dev] Env keys in request:", Object.keys(proxy.env));  
    } catch (error) {  
      console.error("[Cloudflare Dev] Error in request hook:", error);  
    }  
  });  
  
  // Dispose proxy when Nitro is closed  
  nitroApp.hooks.hook("close", () => {  
    console.log("[Cloudflare Dev] Disposing proxy");  
    return proxy?.dispose();  
  });  
};  
  
export default cloudflareDevPlugin;  
  
async function _getPlatformProxy() {  
  const pkg = "wrangler"; // bypass bundler  
  const { getPlatformProxy } = (await import(/* @vite-ignore */ pkg).catch(() => {  
    throw new Error(  
      "Package `wrangler` not found, please install it with: `npx nypm@latest add -D wrangler`"  
    );  
  }));  
  
  const runtimeConfig = useRuntimeConfig();  
  
  const proxyOptions = {  
    configPath: runtimeConfig.wrangler?.configPath,  
    persist: { path: runtimeConfig.wrangler?.persistDir },  
  };  
    
  if (runtimeConfig.wrangler?.environment) {  
    proxyOptions.environment = runtimeConfig.wrangler.environment;  
  }  
    
  console.log("[Cloudflare Dev] Initializing platform proxy...");  
  console.log("[Cloudflare Dev] Runtime config:", runtimeConfig.wrangler);  
  console.log("[Cloudflare Dev] Proxy options:", proxyOptions);  
    
  const wrangler = await import(pkg);  
  console.log("[Cloudflare Dev] Wrangler imported successfully");  
    
  const proxy = await getPlatformProxy(proxyOptions);  
  console.log("[Cloudflare Dev] Platform proxy created successfully");  
    
  return proxy;  
}  
  
function _createStubProxy() {  
  console.warn("[Cloudflare Dev] Using stub proxy - Wrangler proxy failed to initialize");  
    
  return {  
    env: {},  
    cf: {},  
    ctx: {  
      waitUntil() {},  
      passThroughOnException() {},  
      props: {},  
    },  
    caches: {  
      open() {  
        const result = Promise.resolve(new _CacheStub());  
        return result;  
      },  
      get default() {  
        return new _CacheStub();  
      },  
    },  
    dispose: () => Promise.resolve(),  
  };  
}  
  
class _CacheStub {  
  delete() {  
    const result = Promise.resolve(false);  
    return result;  
  }  
    
  match() {  
    const result = Promise.resolve(undefined);  
    return result;  
  }  
    
  put() {  
    const result = Promise.resolve();  
    return result;  
  }  
}```

[MickL]

Hello! In order to get help I guess you have to add:

1. Information of what environment you have, most importantly if you use Nitro v2 or v3
2. A minimal reproduction repo

[Joeldorne]

Nitro 3.

It's a really simple issues when you run npm run dev req.runtime.cloudflare doesn't bind to anything but event.context.cloudflare works.

When you run npx wrangler dev or npm run preview req.runtime.cloudflare binds but event.context.cloudflare doesn't therefor you have to write.

const cf = event.req.runtime.cloudflare || event.context.cloudflare;

Instead of just event.req.runtime.cloudflare if you want to both use nitro server and wrangler. The docs says event.req.runtime.cloudflare works in nitro dev server and so does the code. Likely there's a bug because it doesn't work.

There's no consistent API for both environments.

[MickL]

Thats probably a bug then, it should be available at event.req.runtime.cloudflare:

https://nitro.build/docs/migration#cloudflare-bindings-access

Can you edit your initial issue and give it a proper description as well as add a reproduction repo?

[schplitt]

Having the same issues with a vite + nitro v3 setup.
Cloudflare bindings are not available even though cloudflare-dev emulation is used