Registry / web-framework / react-router-hono-server

react-router-hono-server

library2.25.3jsnpmunverified

react-router-hono-server is a JavaScript/TypeScript library designed to integrate React Router v7 applications with Hono servers, primarily through a Vite plugin. It simplifies the setup of server-side rendering (SSR) and middleware for React Router, enabling development with Vite's Hot Module Replacement (HMR). The library is currently at version 2.25.3, with a release cadence that frequently updates to align with new versions of Hono and React Router. Its key differentiators include native support for React Router v7's unstable middleware API, broad deployment target compatibility (Node, Bun, Cloudflare Workers, AWS Lambda), and an opinionated but customizable default Hono server configuration. It strictly operates in ESM mode and leverages Vite for its build and development pipeline. The package relies on peer dependencies like `hono`, `react-router`, and `@hono/node-server` to function.

web-framework

npm install react-router-hono-server

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-ROUTER-HONO-

react-router-hono-server

web-frameworkjavascriptv2.25.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

reactRouterHonoServer

✓ import { reactRouterHonoServer } from 'react-router-hono-server/dev';

✗ const reactRouterHonoServer = require('react-router-hono-server/dev');

This is the Vite plugin entry point, used in `vite.config.ts`. The library is ESM-only.

createHonoServer

✓ import { createHonoServer } from 'react-router-hono-server/node';

✗ import { createHonoServer } from 'react-router-hono-server';

The `createHonoServer` function is runtime-specific; use `/node` for Node.js environments. Other entry points may exist for Bun/Workers.

Future

✓ declare module 'react-router' { interface Future { v8_middleware: true; } }

This is a type declaration, not a runtime import. It's crucial for enabling correct TypeScript typings for React Router v8 middleware flags when using this library.

This shows how to integrate the `react-router-hono-server/dev` Vite plugin into your `vite.config.ts` to automatically generate a default Hono server for your React Router application, enabling HMR and production builds.

import { reactRouter } from "@react-router/dev/vite"; import { reactRouterHonoServer } from "react-router-hono-server/dev"; import { defineConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-paths"; export default defineConfig({ plugins: [ reactRouterHonoServer(), // Add this plugin to enable Hono server integration reactRouter(), // Required React Router Dev plugin tsconfigPaths() ], // Optional: Configure build outputs for server (e.g., for Cloudflare Workers) // build: { // rollupOptions: { // output: { // entryFileNames: '[name].js', // chunkFileNames: '[name]-[hash].js', // assetFileNames: '[name].[ext]' // } // } // } }); // This minimal setup automatically generates a default Hono server. // For custom server logic, create a 'server.ts' file at your app's root // or configure the 'serverEntryPoint' option in reactRouterHonoServer().

Debug

Known issues

breakingThis package is strictly compatible only with React Router v7. It is not compatible with previous versions (e.g., Remix or older React Router versions).

fix

Ensure your project uses React Router v7. If migrating from v1, consult the migration guide in the package's GitHub repository.

affects: >=2.0.0

breakingThe library is ESM-only. CommonJS (CJS) `require()` statements are not supported for importing any modules from this package.

fix

Always use `import ... from '...'` syntax. Ensure your project is configured for ESM, including `type: 'module'` in `package.json` if running in Node.js.

affects: >=2.0.0

gotchaFor correct TypeScript typings, especially when using React Router's middleware, you must declare `v8_middleware: true` in the `Future` interface of the `react-router` module.

fix

Add `declare module 'react-router' { interface Future { v8_middleware: true; } }` to a TypeScript declaration file (e.g., `react-router.config.ts` or `src/globals.d.ts`).

affects: >=2.22.0

gotchaThe `hono` package is a peer dependency. If using pnpm, you might encounter issues with `hono` not being found due to pnpm's strict dependency linking.

fix

Manually install `hono` or add `public-hoist-pattern[]=hono` to your `.npmrc` file if using pnpm to ensure it's hoisted and discoverable.

affects: >=2.24.1

gotchaThe `react-router-hono-server/dev` Vite plugin is required for development, HMR, and to trigger the server build process.

fix

Ensure `reactRouterHonoServer()` is included in the `plugins` array of your `vite.config.ts`.

affects: >=2.0.0

gotchaBy default, the plugin looks for a server entry point at `${appDirectory}/server.ts` or in a folder named `${appDirectory}/server`. These paths are reserved unless a custom `serverEntryPoint` is explicitly configured in the plugin options.

fix

Either use the default naming convention (`server.ts`) or specify your custom server entry point via `reactRouterHonoServer({ serverEntryPoint: './path/to/your/server.ts' })`.

affects: >=2.0.0

Errors

Common errors & fixes

Module 'react-router' has no exported member 'Future'.

The TypeScript declaration for `Future` with `v8_middleware` flag is missing or incorrectly placed.

fix

Add the type declaration `declare module 'react-router' { interface Future { v8_middleware: true; } }` to a global TypeScript declaration file in your project.

SyntaxError: require() of ES Module ... not supported. Instead change the require to a dynamic import() or top-level import statement.

Attempting to use CommonJS `require()` to import modules from `react-router-hono-server`, which is an ESM-only package.

fix

Refactor all module imports to use ES module `import ... from '...'` syntax. Ensure your Node.js environment is configured to run ESM.

Error: [plugin:react-router-hono-server] Server entry point not found. Please provide one or use the default 'server.ts' or 'server/index.ts'.

The Vite plugin could not locate a server entry file as per its default conventions or a specified `serverEntryPoint` option.

fix

Create a `server.ts` file in your application's root directory, or specify the correct path to your server entry file using the `serverEntryPoint` option in `reactRouterHonoServer({ serverEntryPoint: './src/my-server-entry.ts' })` in `vite.config.ts`.

Error: Cannot find module 'hono' or Error: 'hono' is not found in the root dependency tree.

The `hono` peer dependency is not correctly installed or linked, often due to package manager strictness (e.g., pnpm).

fix

Ensure `hono` is explicitly installed in your project (`npm install hono` or `yarn add hono`). If using pnpm, add `public-hoist-pattern[]=hono` to your `.npmrc` file.

Upgrade

Version history

2.25.3latest on npm

Audit

Dependencies

@cloudflare/workers-typesoptionalRequired for Cloudflare Workers deployment targets.

@hono/node-serverrequiredRuntime server adapter for Node.js environments. Can be a dev dependency for Bun.

@react-router/devrequiredPeer dependency for the React Router Vite plugin, which is used by this package's Vite plugin.

@types/reactrequiredPeer dependency for React type definitions.

honorequiredCore Hono framework dependency for server creation and middleware.

miniflareoptionalRequired for local development and testing with Cloudflare Workers.

react-routerrequiredCore peer dependency for React Router v7 functionality.

viterequiredCore peer dependency as it integrates directly with Vite build and development processes.

wrangleroptionalRequired for deploying to Cloudflare Workers.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/rphlmr/react-router-hono-server ↗

packagehttps://www.npmjs.com/package/react-router-hono-server ↗