[Fix] Prevent build import conflicts by splitting imports into chunks (#149)

* Rollback single file server output (revert to 2.16.0 behavior)

* Prevent build import conflicts by splitting imports into chunks

Author: rphlmr

.changeset/curly-loops-enjoy.md

@@ -0,0 +1,5 @@
+---
+"react-router-hono-server": minor
+---
+
+Prevent build import conflicts by splitting imports into chunks

.changeset/great-items-attack.md

@@ -0,0 +1,5 @@
+---
+"react-router-hono-server": minor
+---
+
+Rollback single file server output (revert to 2.16.0 behavior)

.github/workflows/publish-commit.yaml

@@ -1,5 +1,5 @@
 name: 🚀 pkg-pr-new
-on: [push, pull_request]
+on: [pull_request]
 
 jobs:
   build:

README.md

@@ -305,7 +305,7 @@ touch app/server.ts
 // app/server.ts
 import { createHonoServer } from "react-router-hono-server/node";
 
-export default await createHonoServer({/* options */});
+export default createHonoServer({/* options */});
 ```
 
 #### Alternative
@@ -325,7 +325,7 @@ It is useful if you have many middleware and want to keep your server file clean
 
 import { createHonoServer } from "react-router-hono-server/node";
 
-export default await createHonoServer({/* options */});
+export default createHonoServer({/* options */});
 ```
 
 #### I don't like this default
@@ -526,12 +526,6 @@ export type HonoServerOptions<E extends Env = BlankEnv> = {
 
 You can add additional Hono middleware with the `configure` function. If you do not provide a function, it will create a default Hono server.
 
-The `configure` function can be async. So, make sure to `await createHonoServer()`.
-
-> NB: If you import some shared code in your server file (or middleware), Vite will code split the file (your server code will be in a separate chunk, re-exported as default in `build/server/index.js`).
->
-> In this situation, if you  `await createHonoServer()` it will error with `Detected unsettled top-level await`. Just remove the `await` and it will work fine.
-
 If you want to set up the React Router `AppLoadContext`, pass in a function to `getLoadContext`.
 
 Modify the `AppLoadContext` interface used in your app.
@@ -557,7 +551,7 @@ declare module "react-router" {
   }
 }
 
-export default await createHonoServer({
+export default createHonoServer({
   getLoadContext(_, { build, mode }) {
     const isProductionMode = mode === "production";
     return {
@@ -743,7 +737,7 @@ You can use it to add protection middleware, for example.
 import { reactRouterRedirect } from "react-router-hono-server/http";
 import { createHonoServer } from "react-router-hono-server/node";
 
-export default await createHonoServer({
+export default createHonoServer({
   beforeAll(app) {
     app.use(async (c, next) => {
       if (c.req.path.includes("/protected") && !c.req.header("Authorization")) {
@@ -765,7 +759,7 @@ import { createCookieSessionStorage } from "react-router";
 import { createHonoServer } from "react-router-hono-server/node";
 import { session } from "remix-hono/session";
 
-export default await createHonoServer({
+export default createHonoServer({
   configure: (server) => {
     server.use(
       session({
@@ -808,7 +802,7 @@ Then, use them with the `configure` function of `createHonoServer`.
 import { createMiddleware } from "hono/factory";
 import { createHonoServer } from "react-router-hono-server/node";
 
-export default await createHonoServer({
+export default createHonoServer({
   configure: (server) => {
     server.use(
       createMiddleware(async (c, next) => {
@@ -846,7 +840,7 @@ import { createHonoServer } from "react-router-hono-server/node";
 // Store connected clients
 const clients = new Set<WSContext>();
 
-export default await createHonoServer({
+export default createHonoServer({
   useWebSocket: true,
   // 👆 Unlock this 👇 from @hono/node-ws
   configure: (app, { upgradeWebSocket }) => {
@@ -892,7 +886,7 @@ import { createHonoServer } from "react-router-hono-server/bun";
 // Store connected clients
 const clients = new Set<WSContext>();
 
-export default await createHonoServer({
+export default createHonoServer({
   useWebSocket: true,
   // 👆 Unlock this 👇 from @hono/node-ws in dev, hono/bun in prod
   configure(app, { upgradeWebSocket }) {
@@ -976,7 +970,7 @@ const app = new Hono();
 // Mount the API app at /api
 app.route(API_BASENAME, api);
 
-export default await createHonoServer({
+export default createHonoServer({
   // Pass the root Hono app to the server.
   // It will be used to mount the React Router app on the `basename` defined in react-router.config.ts
   app,
@@ -1070,7 +1064,7 @@ We now use the Vite virtual import `virtual:react-router/server-build` to load t
 > ```ts
 > import { createHonoServer } from "react-router-hono-server/node";
 >
-> export default await createHonoServer({/* other options */});
+> export default createHonoServer({/* other options */});
 > ```
 
 ### Update your `vite.config.ts`

package.json

@@ -86,9 +86,7 @@
   "bin": {
     "react-router-hono-server": "dist/cli.js"
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "homepage": "https://github.com/rphlmr/react-router-hono-server#readme",
   "dependencies": {
     "@drizzle-team/brocli": "^0.11.0",
@@ -139,12 +137,6 @@
   },
   "packageManager": "[email protected]",
   "pnpm": {
-    "onlyBuiltDependencies": [
-      "@biomejs/biome",
-      "esbuild",
-      "lefthook",
-      "sharp",
-      "workerd"
-    ]
+    "onlyBuiltDependencies": ["@biomejs/biome", "esbuild", "lefthook", "sharp", "workerd"]
   }
 }

src/adapters/bun.ts

@@ -1,6 +1,3 @@
-// @ts-expect-error - Virtual module provided by React Router at build time
-import * as build from "virtual:react-router/server-build";
-
 import type { Serve, ServeOptions } from "bun";
 import { type Env, Hono } from "hono";
 import { serveStatic } from "hono/bun";
@@ -15,6 +12,7 @@ import {
   createGetLoadContext,
   createWebSocket,
   getBuildMode,
+  importBuild,
   patchUpgradeListener,
 } from "../helpers";
 import { cache } from "../middleware";
@@ -71,6 +69,7 @@ export async function createHonoServer<E extends Env = BlankEnv>(
   options?: HonoServerOptionsWithWebSocket<E>
 ): Promise<CustomBunServer>;
 export async function createHonoServer<E extends Env = BlankEnv>(options?: HonoServerOptions<E>) {
+  const build = await importBuild();
   const basename = import.meta.env.REACT_ROUTER_HONO_SERVER_BASENAME;
   const mergedOptions: HonoServerOptions<E> = {
     ...options,

src/adapters/node.ts

@@ -1,6 +1,3 @@
-// @ts-expect-error - Virtual module provided by React Router at build time
-import * as build from "virtual:react-router/server-build";
-
 import type { AddressInfo } from "node:net";
 import { type ServerType, serve } from "@hono/node-server";
 import { type ServeStaticOptions, serveStatic } from "@hono/node-server/serve-static";
@@ -15,6 +12,7 @@ import {
   createGetLoadContext,
   createWebSocket,
   getBuildMode,
+  importBuild,
   patchUpgradeListener,
 } from "../helpers";
 import { cache } from "../middleware";
@@ -95,6 +93,8 @@ export async function createHonoServer<E extends Env = BlankEnv>(
   options?: HonoServerOptionsWithWebSocket<E>
 ): Promise<Hono<E>>;
 export async function createHonoServer<E extends Env = BlankEnv>(options?: HonoServerOptions<E>) {
+  const startTime = Date.now();
+  const build = await importBuild();
   const basename = import.meta.env.REACT_ROUTER_HONO_SERVER_BASENAME;
   const mergedOptions: HonoServerOptions<E> = {
     ...options,
@@ -107,6 +107,8 @@ export async function createHonoServer<E extends Env = BlankEnv>(options?: HonoS
         if (basename !== "/") {
           console.log(`🔗 http://127.0.0.1:${info.port}${basename}`);
         }
+
+        console.log(`🏎️ Server started in ${Date.now() - startTime}ms`);
       }),
     port: options?.port || Number(process.env.PORT) || 3000,
     defaultLogger: options?.defaultLogger ?? true,

src/dev.ts

@@ -144,7 +144,6 @@ export function reactRouterHonoServer(options: ReactRouterHonoServerPluginOption
 
       let reactRouterBuildFile = pluginConfig.serverBuildFile;
 
-      // TODO: Useless now
       if (reactRouterBuildFile === "index.js") {
         reactRouterBuildFile = "assets/server-build.js";
       }
@@ -187,21 +186,30 @@ export function reactRouterHonoServer(options: ReactRouterHonoServerPluginOption
 
                 return "index.js";
               },
-              // not invoked when target is webworker (single file output) TODO: Useless now
+              // not invoked when target is webworker (single file output)
               chunkFileNames: (chunk) => {
                 if (chunk.name === "server-build") {
                   return reactRouterBuildFile;
                 }
                 return "assets/[name]-[hash].js";
               },
+              manualChunks:
+                runtime !== "cloudflare"
+                  ? (id) => {
+                      if (id.includes(REACT_ROUTER_VIRTUAL_MODULE_ID)) {
+                        return "server-build";
+                      }
+
+                      if (id.includes(pluginConfig!.serverEntryPoint)) {
+                        return "server";
+                      }
+
+                      return "chunk";
+                    }
+                  : undefined,
               // We are doing that because we build a single file that only exports the Hono server
               // RR needs its exports for prerendering
-              footer: (chunk) => {
-                if (!chunk.isEntry) {
-                  return "";
-                }
-                return REACT_ROUTER_EXPORT;
-              },
+              footer: runtime === "cloudflare" ? REACT_ROUTER_EXPORT : undefined,
             },
           },
         },