Has anyone been able to use cloudflare durable objects successfully with react-router 7 in framework mode?

[alindsay55661]

Everything I try seems to not allow binding durable objects, at least not in development. I'm pulling my hair out, any help is greatly appreciated!

[contrebande-labs]

It is possible, but not straightforward. I'm not even sure I got it right!

The problems come mostly from the fact that the build is done by Vite, which uses the getPlatformProxy function to interact the with Cloudflare locally... You need to run an instance of your worker separately so Vite can talk to it. Do you use Cloudflare Pages or the new Workers Assets?

[hyusetiawan]

I am very interested in this too, I wonder if there is a sample project out there we can follow
@contrebande-labs Do you have a guide for making it work in Workers Assets mode?

This is a possible solution, tried integrating it but i was not really able to make it work, most likely the error is on my part:
https://github.com/zebp/react-router-durable

[mmmoli]

Spotted this recently:
https://orange-js.dev/

Can't vouch for it yet – docs are a bit too lightweight – but it's trying to tackle this.

[hyusetiawan]

yeah i follow the creator on X he's making a lot of good progress

https://x.com/zebassembly

@zebp

[alindsay55661]

This is now solved by Cloudflare's native vite plugin: https://blog.cloudflare.com/introducing-the-cloudflare-vite-plugin/

[alindsay55661]

Use the template they provide in the blog post: https://blog.cloudflare.com/introducing-the-cloudflare-vite-plugin/#react-router-v7

Once you have that running, just add a durable object anywhere, literally anywhere. As long as you bind in wrangler.toml it will work just fine. Obviously it's subject to normal durable object rules (must be exported from your worker) but "it just works" so I'm not sure where you're running into a problem. If you post an example where it doesn't work I can help troubleshoot.

[hyusetiawan]

big protip: use re-export syntax ex:
export {MyDurableObjectClass} from 'anywhere/MyDurableObjectClass
I put this in my app.ts but i am not sure if it will also work in the routes, might need to do some testing

[alindsay55661]

Yes, if you export from the worker (workers/app.ts in the example) then typegen (wrangler types, react-router typegen) or manually add the binding to the environment types, you can use the durable object in any route because it's available on AppLoadContext:

// my-route.tsx

export async function loader({ context }: Route.LoaderArgs) {
  const id = context.cloudflare.env.MY_DURABLE_OBJECT.idFromName('my-durable-object')
  const stub = context.cloudflare.env.MY_DURABLE_OBJECT.get(id)
  const data = await stub.getSomeRPCData()
  return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE, durableObjectData: data };
}

[mattymattdev]

And the note to export in App.ts did the trick. Before I did this my stub was not of the proper type.

Also, for posterity of anyone coming across this thread, if you try to import the DO class you make it will throw an error at build time because the module is a vite-virtualized one and does not exist in the dev runtime (it is accessible through cloudflare only as the vite plugin creates it in the cloudflare context in the binding).

Thank you all very much!

[alindsay55661]

@mattymattdev do you have a link to your failing build? The native cloudflare vite plugin does not trigger any errors on build or when working locally in dev when configured properly. In other words, you get the full wrangler experience in react-router 7 now, which includes fully emulated durable objects, D1, R2, workflows, etc. as part of local development. You should not be seeing errors in dev that aren't present in prod because workerd is now the dev runtime instead of node. Did you generate all your types? Even your react-router ones?

[mmmoli]

My understanding is that you cannot run your rr7 app and Durable Objects from the same worker. Instead, you have to create a new worker with the DOs and add it as a service binding to your rr7 worker. Can anyone confirm or deny this? I made my app work with this method.

…

On Fri, 18 Apr 2025, 01:07 Alan Lindsay, ***@***.***> wrote: This is now solved by Cloudflare's native vite plugin: https://blog.cloudflare.com/introducing-the-cloudflare-vite-plugin/ — Reply to this email directly, view it on GitHub <#12565 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAALNV4BO7CHRWI2JGIWKUT22A64TAVCNFSM6AAAAABTXWVD6WVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEOBXGI3DOOI> . You are receiving this because you are subscribed to this thread.Message ID: <remix-run/react-router/repo-discussions/12565/comments/12872679@ github.com>

[alindsay55661]

I can confirm that the native cloudflare vite plug-in, the latest version, allows bindings in the same worker. My monrepo splits various resources out as separate projects but I run a single rr7 worker with D1 and multiple DO bindings just fine.

[mmmoli]

This has all been really useful so far. Thank you all.

I've just got a small piece missing from my mental model – maybe others do too?

✅ I've got a fresh RR setup from cloudflare CLI.

✅ I've defined my DO. It's a clone of the websocket + hibernate example.

✅ Added DO Bindings

✅ Imported the DO from worker entrypoint

-- All good so far ––

Missing piece: how do I hit the DO's websocket endpoint? How do I call the fetch method that upgrades the http connection?

❌ Tried a loader like this:

export async function loader({ context, request }: Route.LoaderArgs) {
  const id = context.cloudflare.env.LIKE_SERVER.idFromName("my-like-server");
  const stub = context.cloudflare.env.LIKE_SERVER.get(id);
  return stub.fetch(request);
}

…But react-router really doesn't want to return that handshake.

[hyusetiawan]

import type {Route} from '.react-router/types/app/routes/+types/api.ws'

export async function action(args: Route.LoaderArgs) {
  return await loader(args)
}

export async function loader({
  request,
  context: {
    cloudflare: {env},
  },
}: Route.ActionArgs) {
  console.log('REQUEST: URL: ', request.url)

  // Expect to receive a WebSocket Upgrade request.
  // If there is one, accept the request and return a WebSocket Response.
  const upgradeHeader = request.headers.get('Upgrade')

  if (!upgradeHeader || upgradeHeader !== 'websocket') {
    return new Response('Durable Object expected Upgrade: websocket', {
      status: 426,
    })
  }

  // This example will refer to the same Durable Object,
  // since the name "foo" is hardcoded.
  let id = env.WEBSOCKET_HIBERNATION_SERVER.idFromName('foo')
  let stub = env.WEBSOCKET_HIBERNATION_SERVER.get(id)

  return stub.fetch(request)
}

[mmmoli]

Thanks.

I couldn't make any progress with this. Created a repo:
https://github.com/mmmoli/rr-do-demo

[alindsay55661]

This does appear to be a bug. Either react router or cloudflare vite plugin is not allowing the 101 response to pass through untouched, there is an attempt to recreate it (wrap it possibly) that triggers the error. Workarounds suggested here do not apply as this was hono-specific.

cloudflare/workerd#3047