@netlify/vite-plugin-react-router 3.1.0-next.1 → 3.1.0-next.2

package/README.md

@@ -10,33 +10,28 @@ To deploy a React Router 7+ site to Netlify, install this package:
 npm install @netlify/vite-plugin-react-router
 ```
 
-It's also recommended (but not required) to use the
-[Netlify Vite plugin](https://www.npmjs.com/package/@netlify/vite-plugin), which provides full Netlify platform
-emulation directly in your local dev server:
-
-```sh
-npm install --save-dev @netlify/vite-plugin
-```
-
-and include the Netlify plugin in your `vite.config.ts`:
+Then include the Netlify plugin in your `vite.config.ts`:
 
 ```typescript
 import { reactRouter } from '@react-router/dev/vite'
 import { defineConfig } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
 import netlifyReactRouter from '@netlify/vite-plugin-react-router' // <- add this
-import netlify from '@netlify/vite-plugin' // <- add this (optional)
 
 export default defineConfig({
   plugins: [
     reactRouter(),
     tsconfigPaths(),
     netlifyReactRouter(), // <- add this
-    netlify(), // <- add this (optional)
   ],
 })
 ```
 
+> [!NOTE]
+>
+> This plugin automatically includes [`@netlify/vite-plugin`](https://npmx.dev/@netlify/vite-plugin), which provides
+> full Netlify platform emulation directly in your local dev server.
+
 Your app is ready to [deploy to Netlify](https://docs.netlify.com/deploy/create-deploys/).
 
 ### Deploying to Edge Functions
@@ -53,7 +48,6 @@ export default defineConfig({
     reactRouter(),
     tsconfigPaths(),
     netlifyReactRouter({ edge: true }), // <- deploy to Edge Functions
-    netlify(),
   ],
 })
 ```
@@ -88,7 +82,6 @@ export default defineConfig({
       edge: true,
       excludedPaths: ['/ping', '/api/*', '/webhooks/*'],
     }),
-    netlify(),
   ],
 })
 ```
@@ -159,12 +152,6 @@ export default function Example() {
 }
 ```
 
-> [!IMPORTANT]
->
-> Note that in local development, `netlifyRouterContext` requires Netlify platform emulation, which is provided
-> seamlessly by [`@netlify/vite-plugin`](https://www.npmjs.com/package/@netlify/vite-plugin) (or Netlify CLI - up to
-> you).
-
 ### Middleware context
 
 React Router introduced a stable middleware feature in 7.9.0.
@@ -193,9 +180,3 @@ export default function Home() {
   return <h1>Hello world</h1>
 }
 ```
-
-> [!IMPORTANT]
->
-> Note that in local development, `netlifyRouterContext` requires Netlify platform emulation, which is provided
-> seamlessly by [`@netlify/vite-plugin`](https://www.npmjs.com/package/@netlify/vite-plugin) (or Netlify CLI - up to
-> you).

package/dist/index.d.mts

@@ -21,6 +21,6 @@ interface NetlifyPluginOptions {
      */
     excludedPaths?: string[];
 }
-declare function netlifyPlugin(options?: NetlifyPluginOptions): Plugin;
+declare function netlifyPlugin(options?: NetlifyPluginOptions): Plugin[];
 
 export { netlifyPlugin as default };

package/dist/index.d.ts

@@ -60,6 +60,6 @@ interface NetlifyPluginOptions {
      */
     excludedPaths?: string[];
 }
-declare function netlifyPlugin(options?: NetlifyPluginOptions): Plugin;
+declare function netlifyPlugin(options?: NetlifyPluginOptions): Plugin[];
 
 export { type GetLoadContextFunction, type RequestHandler, createRequestHandler, netlifyPlugin as default, netlifyRouterContext };

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name2 in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -109,11 +119,13 @@ function createRequestHandler({
 var import_promises = require("fs/promises");
 var import_node_path2 = require("path");
 var import_posix = require("path/posix");
+var import_vite_plugin = __toESM(require("@netlify/vite-plugin"));
+var import_node_fetch_server = require("@remix-run/node-fetch-server");
 var import_tinyglobby = require("tinyglobby");
 
 // package.json
 var name = "@netlify/vite-plugin-react-router";
-var version = "3.1.0-next.1";
+var version = "3.1.0-next.2";
 
 // src/lib/rollup.ts
 var import_node_path = require("path");
@@ -228,7 +240,8 @@ function netlifyPlugin(options = {}) {
   let isProductionSsrBuild = false;
   let currentCommand;
   let isHydrogenSite = false;
-  return {
+  let userServerFile;
+  const reactRouterPlugin = {
     name: "vite-plugin-netlify-react-router",
     config(_config, { command, isSsrBuild }) {
       currentCommand = command;
@@ -296,14 +309,52 @@ function netlifyPlugin(options = {}) {
       async handler(config) {
         resolvedConfig = config;
         isHydrogenSite = config.plugins.some((plugin) => plugin.name === "hydrogen:main");
-        if (isHydrogenSite && edge && isProductionSsrBuild) {
-          const userServerFile = await findUserEdgeFunctionHandlerFile(config.root);
-          if (config.build?.rollupOptions?.input && typeof config.build.rollupOptions.input === "object" && !Array.isArray(config.build.rollupOptions.input)) {
-            config.build.rollupOptions.input[FUNCTION_HANDLER_CHUNK] = userServerFile;
+        if (isHydrogenSite && edge) {
+          userServerFile = await findUserEdgeFunctionHandlerFile(config.root);
+          if (isProductionSsrBuild) {
+            if (config.build?.rollupOptions?.input && typeof config.build.rollupOptions.input === "object" && !Array.isArray(config.build.rollupOptions.input)) {
+              config.build.rollupOptions.input[FUNCTION_HANDLER_CHUNK] = userServerFile;
+            }
           }
         }
       }
     },
+    // In dev, Hydrogen sites need their server.ts to be loaded and called for each request so that
+    // it can provide `getLoadContext` (storefront, cart, session, etc.) to React Router's request
+    // handler. Without this, React Router's dev middleware would handle SSR with no load context.
+    configureServer: {
+      order: "pre",
+      handler(viteDevServer) {
+        if (!isHydrogenSite || !edge) return;
+        if (!userServerFile) {
+          viteDevServer.config.logger.warn(
+            "Hydrogen site detected but no server.ts found. Dev SSR will fall through to React Router defaults."
+          );
+          return;
+        }
+        const serverEntryFile = userServerFile;
+        return () => {
+          viteDevServer.middlewares.use(async (req, res, next) => {
+            try {
+              const serverModule = await viteDevServer.ssrLoadModule((0, import_node_path2.join)(viteDevServer.config.root, serverEntryFile));
+              const handler = serverModule.default;
+              req.url = req.originalUrl ?? req.url;
+              const request = (0, import_node_fetch_server.createRequest)(req, res);
+              const netlifyContext = { waitUntil: () => {
+              }, ...globalThis.Netlify?.context };
+              const response = await handler(request, netlifyContext);
+              if (response) {
+                await (0, import_node_fetch_server.sendResponse)(res, response);
+              } else {
+                next();
+              }
+            } catch (error) {
+              next(error);
+            }
+          });
+        };
+      }
+    },
     // See https://rollupjs.org/plugin-development/#writebundle.
     async writeBundle() {
       if (isProductionSsrBuild) {
@@ -338,6 +389,7 @@ function netlifyPlugin(options = {}) {
       }
     }
   };
+  return [reactRouterPlugin, ...(0, import_vite_plugin.default)()];
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -8,11 +8,13 @@ import "./chunk-J5PMA2AP.mjs";
 import { access, mkdir, writeFile } from "node:fs/promises";
 import { dirname, join, relative, resolve, sep } from "node:path";
 import { sep as posixSep } from "node:path/posix";
+import netlifyVitePlugin from "@netlify/vite-plugin";
+import { createRequest, sendResponse } from "@remix-run/node-fetch-server";
 import { glob } from "tinyglobby";
 
 // package.json
 var name = "@netlify/vite-plugin-react-router";
-var version = "3.1.0-next.1";
+var version = "3.1.0-next.2";
 
 // src/lib/rollup.ts
 import { basename, extname } from "node:path";
@@ -127,7 +129,8 @@ function netlifyPlugin(options = {}) {
   let isProductionSsrBuild = false;
   let currentCommand;
   let isHydrogenSite = false;
-  return {
+  let userServerFile;
+  const reactRouterPlugin = {
     name: "vite-plugin-netlify-react-router",
     config(_config, { command, isSsrBuild }) {
       currentCommand = command;
@@ -195,14 +198,52 @@ function netlifyPlugin(options = {}) {
       async handler(config) {
         resolvedConfig = config;
         isHydrogenSite = config.plugins.some((plugin) => plugin.name === "hydrogen:main");
-        if (isHydrogenSite && edge && isProductionSsrBuild) {
-          const userServerFile = await findUserEdgeFunctionHandlerFile(config.root);
-          if (config.build?.rollupOptions?.input && typeof config.build.rollupOptions.input === "object" && !Array.isArray(config.build.rollupOptions.input)) {
-            config.build.rollupOptions.input[FUNCTION_HANDLER_CHUNK] = userServerFile;
+        if (isHydrogenSite && edge) {
+          userServerFile = await findUserEdgeFunctionHandlerFile(config.root);
+          if (isProductionSsrBuild) {
+            if (config.build?.rollupOptions?.input && typeof config.build.rollupOptions.input === "object" && !Array.isArray(config.build.rollupOptions.input)) {
+              config.build.rollupOptions.input[FUNCTION_HANDLER_CHUNK] = userServerFile;
+            }
           }
         }
       }
     },
+    // In dev, Hydrogen sites need their server.ts to be loaded and called for each request so that
+    // it can provide `getLoadContext` (storefront, cart, session, etc.) to React Router's request
+    // handler. Without this, React Router's dev middleware would handle SSR with no load context.
+    configureServer: {
+      order: "pre",
+      handler(viteDevServer) {
+        if (!isHydrogenSite || !edge) return;
+        if (!userServerFile) {
+          viteDevServer.config.logger.warn(
+            "Hydrogen site detected but no server.ts found. Dev SSR will fall through to React Router defaults."
+          );
+          return;
+        }
+        const serverEntryFile = userServerFile;
+        return () => {
+          viteDevServer.middlewares.use(async (req, res, next) => {
+            try {
+              const serverModule = await viteDevServer.ssrLoadModule(join(viteDevServer.config.root, serverEntryFile));
+              const handler = serverModule.default;
+              req.url = req.originalUrl ?? req.url;
+              const request = createRequest(req, res);
+              const netlifyContext = { waitUntil: () => {
+              }, ...globalThis.Netlify?.context };
+              const response = await handler(request, netlifyContext);
+              if (response) {
+                await sendResponse(res, response);
+              } else {
+                next();
+              }
+            } catch (error) {
+              next(error);
+            }
+          });
+        };
+      }
+    },
     // See https://rollupjs.org/plugin-development/#writebundle.
     async writeBundle() {
       if (isProductionSsrBuild) {
@@ -237,6 +278,7 @@ function netlifyPlugin(options = {}) {
       }
     }
   };
+  return [reactRouterPlugin, ...netlifyVitePlugin()];
 }
 export {
   createRequestHandler,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netlify/vite-plugin-react-router",
-  "version": "3.1.0-next.1",
+  "version": "3.1.0-next.2",
   "description": "React Router 7+ Vite plugin for Netlify",
   "type": "commonjs",
   "main": "./dist/index.js",
@@ -54,6 +54,8 @@
   "dependencies": {
     "@netlify/edge-functions": "^3.0.4",
     "@netlify/functions": "^5.1.3",
+    "@netlify/vite-plugin": "^2.11.0",
+    "@remix-run/node-fetch-server": "^0.9.0",
     "isbot": "^5.1.25",
     "tinyglobby": "^0.2.10"
   },
@@ -64,7 +66,7 @@
     "react-dom": "^18.2.0",
     "react-router": "^7.9.4",
     "tsup": "^8.0.2",
-    "vite": "^6.2.5"
+    "vite": "^8.0.0"
   },
   "peerDependencies": {
     "react-router": ">=7.9.0",