Skip to content

edmundhung/cloudflare-react-router-rsc

Repository files navigation

React Router RSC on Cloudflare Workers

This template runs React Router's experimental RSC Framework Mode on Cloudflare Workers.

Warning: RSC Framework Mode is experimental.

Quick Start

pnpm install
pnpm dev

Cloudflare Setup Guide

Starting from the RSC Framework Mode template:

1. Install dependencies

pnpm add -D @cloudflare/vite-plugin wrangler
pnpm remove @react-router/serve @remix-run/node-fetch-server

2. Update vite.config.ts

import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
	plugins: [
		cloudflare({
			viteEnvironment: {
				name: "rsc",
				childEnvironments: ["ssr"],
			},
		}),
		// ... keep existing plugins, but update rsc():
		rsc({ serverHandler: false }),
	],
	environments: {
		rsc: {
			optimizeDeps: {
				exclude: ["react-router"],
			},
		},
		ssr: {
			optimizeDeps: {
				exclude: ["react-router"],
			},
		},
	},
});

Note: See Known Issues for why serverHandler: false and optimizeDeps.exclude are needed.

3. Create wrangler.json

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"name": "my-app",
	"main": "@react-router/dev/config/default-rsc-entries/entry.rsc",
	"compatibility_date": "2026-01-29",
	"compatibility_flags": ["nodejs_compat"]
}
  • main points to React Router's default RSC entry (no custom worker needed)
  • nodejs_compat is required for React's usage on Async Local Storage APIs

4. Other files

The rest follows the standard Cloudflare React Router setup:

Known Issues

These workarounds will be resolved in future versions of the plugins.

Hook errors on first dev load

Invalid hook call errors after clearing node_modules/.vite. The reactRouterRSC plugin's optimizeDeps.include for react-router can cause duplicate React instances in worker environments.

Fix: Exclude react-router from optimization in rsc/ssr environments (see config above).

cloudflare:* imports fail in preview mode

ERR_UNSUPPORTED_ESM_URL_SCHEME when using Durable Objects or other cloudflare:* imports. The @vitejs/plugin-rsc preview server tries to import the RSC entry in Node.js, which doesn't support cloudflare:*.

Fix: Set rsc({ serverHandler: false }) since the Cloudflare plugin handles requests via workerd.

Resources

Contributors