@netlify/vite-plugin-react-router 1.0.1 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [2.0.1](https://github.com/netlify/remix-compute/compare/vite-plugin-react-router-v2.0.0...vite-plugin-react-router-v2.0.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* populate value for Netlify React Router context in dev ([#550](https://github.com/netlify/remix-compute/issues/550)) ([8d2c9fd](https://github.com/netlify/remix-compute/commit/8d2c9fd21090ca063d99a9e7094393932d870801))
+
+## [2.0.0](https://github.com/netlify/remix-compute/compare/vite-plugin-react-router-v1.0.1...vite-plugin-react-router-v2.0.0) (2025-10-16)
+
+### ⚠ BREAKING CHANGES
+
+* **@netlify/vite-plugin-react-router:** require React Router 7.9.0+ ([#546](https://github.com/netlify/remix-compute/issues/546))
+
+Please make sure to upgrade `react-router` and other `@react-router/*` dependencies to 7.9.0 or later. Older versions are no longer supported.
+
+### Features
+
+* **@netlify/vite-plugin-react-router:** support React Router middleware ([#546](https://github.com/netlify/remix-compute/issues/546)) ([435fa15](https://github.com/netlify/remix-compute/commit/435fa158d80d78e86b0259c3a668c774ef70c565))
+
 ## [1.0.1](https://github.com/netlify/remix-compute/compare/vite-plugin-react-router-v1.0.0...vite-plugin-react-router-v1.0.1) (2025-04-04)
 
 

package/README.md

@@ -3,27 +3,125 @@
 The React Router Adapter for Netlify allows you to deploy your [React Router](https://reactrouter.com) app to
 [Netlify Functions](https://docs.netlify.com/functions/overview/).
 
-To deploy a React Router 7+ site to Netlify, install this package:
-
 ## How to use
 
+To deploy a React Router 7+ site to Netlify, install this package:
+
 ```sh
 npm install --save-dev @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`:
 
 ```typescript
 import { reactRouter } from '@react-router/dev/vite'
 import { defineConfig } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
-import netlifyPlugin from '@netlify/vite-plugin-react-router' // <- add this
+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(),
-    netlifyPlugin(), // <- add this
+    netlifyReactRouter(), // <- add this
+    netlify(), // <- add this (optional)
   ],
 })
 ```
+
+### Load context
+
+This plugin automatically includes all
+[Netlify context](https://docs.netlify.com/build/functions/api/#netlify-specific-context-object) fields on loader and
+action context.
+
+If you're using TypeScript, `AppLoadContext` is automatically aware of these fields
+([via module augmentation](https://reactrouter.com/upgrading/remix#9-update-types-for-apploadcontext)).
+
+For example:
+
+```tsx
+import { useLoaderData } from 'react-router'
+import type { Route } from './+types/example'
+
+export async function loader({ context }: Route.LoaderArgs) {
+  return {
+    country: context.geo?.country?.name ?? 'an unknown country',
+  }
+}
+export default function Example() {
+  const { country } = useLoaderData<typeof loader>()
+  return <div>You are visiting from {country}</div>
+}
+```
+
+If you've [opted in to the `future.v8_middleware` flag](https://reactrouter.com/how-to/middleware), you can still use
+the above access pattern for backwards compatibility, but loader and action context will now be an instance of the
+type-safe `RouterContextProvider`. Note that this requires requires v2.0.0+ of `@netlify/vite-plugin-react-router`.
+
+For example:
+
+```tsx
+import { netlifyRouterContext } from '@netlify/vite-plugin-react-router'
+import { useLoaderData } from 'react-router'
+import type { Route } from './+types/example'
+
+export async function loader({ context }: Route.LoaderArgs) {
+  return {
+    country: context.get(netlifyRouterContext).geo?.country?.name ?? 'an unknown country',
+  }
+}
+export default function Example() {
+  const { country } = useLoaderData<typeof loader>()
+  return <div>You are visiting from {country}</div>
+}
+```
+
+> [!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.
+
+To use middleware,
+[opt in to the feature via `future.v8_middleware` and follow the docs](https://reactrouter.com/how-to/middleware). Note
+that this requires requires v2.0.0+ of `@netlify/vite-plugin-react-router`.
+
+To access the [Netlify context](https://docs.netlify.com/build/functions/api/#netlify-specific-context-object)
+specifically, you must import our `RouterContextProvider` instance:
+
+```tsx
+import { netlifyRouterContext } from '@netlify/vite-plugin-react-router'
+
+import type { Route } from './+types/home'
+
+const logMiddleware: Route.MiddlewareFunction = async ({ request, context }) => {
+  const country = context.get(netlifyRouterContext).geo?.country?.name ?? 'unknown'
+  console.log(`Handling ${request.method} request to ${request.url} from ${country}`)
+}
+
+export const middleware: Route.MiddlewareFunction[] = [logMiddleware]
+
+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

@@ -1,17 +1,34 @@
-import { AppLoadContext, ServerBuild } from 'react-router';
+import * as react_router from 'react-router';
+import { AppLoadContext, RouterContextProvider, ServerBuild } from 'react-router';
 import { Context } from '@netlify/functions';
 import { Plugin } from 'vite';
 
-type LoadContext = AppLoadContext & Context;
+declare module 'react-router' {
+    interface AppLoadContext extends Context {
+    }
+}
 /**
- * A function that returns the value to use as `context` in route `loader` and
- * `action` functions.
+ * A function that returns the value to use as `context` in route `loader` and `action` functions.
  *
- * You can think of this as an escape hatch that allows you to pass
- * environment/platform-specific values through to your loader/action.
+ * You can think of this as an escape hatch that allows you to pass environment/platform-specific
+ * values through to your loader/action.
+ *
+ * NOTE: v7.9.0 introduced a breaking change when the user opts in to `future.v8_middleware`. This
+ * requires returning an instance of `RouterContextProvider` instead of a plain object. We have a
+ * peer dependency on >=7.9.0 so we can safely *import* these, but we cannot assume the user has
+ * opted in to the flag.
+ */
+type GetLoadContextFunction = GetLoadContextFunction_V7 | GetLoadContextFunction_V8;
+type GetLoadContextFunction_V7 = (request: Request, context: Context) => Promise<AppLoadContext> | AppLoadContext;
+type GetLoadContextFunction_V8 = (request: Request, context: Context) => Promise<RouterContextProvider> | RouterContextProvider;
+type RequestHandler = (request: Request, context: Context) => Promise<Response>;
+/**
+ * An instance of `ReactContextProvider` providing access to
+ * [Netlify request context]{@link https://docs.netlify.com/build/functions/api/#netlify-specific-context-object}
+ *
+ * @example context.get(netlifyRouterContext).geo?.country?.name
  */
-type GetLoadContextFunction = (request: Request, context: Context) => Promise<LoadContext> | LoadContext;
-type RequestHandler = (request: Request, context: LoadContext) => Promise<Response | void>;
+declare const netlifyRouterContext: react_router.RouterContext<Partial<Context>>;
 /**
  * Given a build and a callback to get the base loader context, this returns
  * a Netlify Function handler (https://docs.netlify.com/functions/overview/) which renders the
@@ -26,4 +43,4 @@ declare function createRequestHandler({ build, mode, getLoadContext, }: {
 
 declare function netlifyPlugin(): Plugin;
 
-export { type GetLoadContextFunction, type RequestHandler, createRequestHandler, netlifyPlugin as default };
+export { type GetLoadContextFunction, type RequestHandler, createRequestHandler, netlifyPlugin as default, netlifyRouterContext };

package/dist/index.d.ts

@@ -1,17 +1,34 @@
-import { AppLoadContext, ServerBuild } from 'react-router';
+import * as react_router from 'react-router';
+import { AppLoadContext, RouterContextProvider, ServerBuild } from 'react-router';
 import { Context } from '@netlify/functions';
 import { Plugin } from 'vite';
 
-type LoadContext = AppLoadContext & Context;
+declare module 'react-router' {
+    interface AppLoadContext extends Context {
+    }
+}
 /**
- * A function that returns the value to use as `context` in route `loader` and
- * `action` functions.
+ * A function that returns the value to use as `context` in route `loader` and `action` functions.
  *
- * You can think of this as an escape hatch that allows you to pass
- * environment/platform-specific values through to your loader/action.
+ * You can think of this as an escape hatch that allows you to pass environment/platform-specific
+ * values through to your loader/action.
+ *
+ * NOTE: v7.9.0 introduced a breaking change when the user opts in to `future.v8_middleware`. This
+ * requires returning an instance of `RouterContextProvider` instead of a plain object. We have a
+ * peer dependency on >=7.9.0 so we can safely *import* these, but we cannot assume the user has
+ * opted in to the flag.
+ */
+type GetLoadContextFunction = GetLoadContextFunction_V7 | GetLoadContextFunction_V8;
+type GetLoadContextFunction_V7 = (request: Request, context: Context) => Promise<AppLoadContext> | AppLoadContext;
+type GetLoadContextFunction_V8 = (request: Request, context: Context) => Promise<RouterContextProvider> | RouterContextProvider;
+type RequestHandler = (request: Request, context: Context) => Promise<Response>;
+/**
+ * An instance of `ReactContextProvider` providing access to
+ * [Netlify request context]{@link https://docs.netlify.com/build/functions/api/#netlify-specific-context-object}
+ *
+ * @example context.get(netlifyRouterContext).geo?.country?.name
  */
-type GetLoadContextFunction = (request: Request, context: Context) => Promise<LoadContext> | LoadContext;
-type RequestHandler = (request: Request, context: LoadContext) => Promise<Response | void>;
+declare const netlifyRouterContext: react_router.RouterContext<Partial<Context>>;
 /**
  * Given a build and a callback to get the base loader context, this returns
  * a Netlify Function handler (https://docs.netlify.com/functions/overview/) which renders the
@@ -26,4 +43,4 @@ declare function createRequestHandler({ build, mode, getLoadContext, }: {
 
 declare function netlifyPlugin(): Plugin;
 
-export { type GetLoadContextFunction, type RequestHandler, createRequestHandler, netlifyPlugin as default };
+export { type GetLoadContextFunction, type RequestHandler, createRequestHandler, netlifyPlugin as default, netlifyRouterContext };

package/dist/index.js

@@ -21,12 +21,44 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   createRequestHandler: () => createRequestHandler,
-  default: () => netlifyPlugin
+  default: () => netlifyPlugin,
+  netlifyRouterContext: () => netlifyRouterContext
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/server.ts
 var import_react_router = require("react-router");
+var netlifyRouterContext = (
+  // We must use a singleton because Remix contexts rely on referential equality.
+  // We can't hook into the request lifecycle in dev mode, so we use a Proxy to always read from the
+  // current `Netlify.context` value, which is always contextual to the in-flight request.
+  (0, import_react_router.createContext)(
+    new Proxy(
+      // Can't reference `Netlify.context` here because it isn't set outside of a request lifecycle
+      {},
+      {
+        get(_target, prop, receiver) {
+          return Reflect.get(Netlify.context ?? {}, prop, receiver);
+        },
+        set(_target, prop, value, receiver) {
+          return Reflect.set(Netlify.context ?? {}, prop, value, receiver);
+        },
+        has(_target, prop) {
+          return Reflect.has(Netlify.context ?? {}, prop);
+        },
+        deleteProperty(_target, prop) {
+          return Reflect.deleteProperty(Netlify.context ?? {}, prop);
+        },
+        ownKeys(_target) {
+          return Reflect.ownKeys(Netlify.context ?? {});
+        },
+        getOwnPropertyDescriptor(_target, prop) {
+          return Reflect.getOwnPropertyDescriptor(Netlify.context ?? {}, prop);
+        }
+      }
+    )
+  )
+);
 function createRequestHandler({
   build,
   mode,
@@ -37,8 +69,14 @@ function createRequestHandler({
     const start = Date.now();
     console.log(`[${request.method}] ${request.url}`);
     try {
-      const mergedLoadContext = await getLoadContext?.(request, netlifyContext) || netlifyContext;
-      const response = await reactRouterHandler(request, mergedLoadContext);
+      const getDefaultReactRouterContext = () => {
+        const ctx = new import_react_router.RouterContextProvider();
+        ctx.set(netlifyRouterContext, netlifyContext);
+        Object.assign(ctx, netlifyContext);
+        return ctx;
+      };
+      const reactRouterContext = await getLoadContext?.(request, netlifyContext) ?? getDefaultReactRouterContext();
+      const response = await reactRouterHandler(request, reactRouterContext);
       response.headers.set("x-nf-runtime", "Node");
       console.log(`[${response.status}] ${request.url} (${Date.now() - start}ms)`);
       return response;
@@ -56,7 +94,7 @@ var import_posix = require("path/posix");
 
 // package.json
 var name = "@netlify/vite-plugin-react-router";
-var version = "1.0.1";
+var version = "2.0.1";
 
 // src/plugin.ts
 var NETLIFY_FUNCTIONS_DIR = ".netlify/v1/functions";
@@ -72,7 +110,6 @@ import { createRequestHandler } from "@netlify/vite-plugin-react-router";
 import * as build from "virtual:react-router/server-build";
 export default createRequestHandler({
   build,
-  getLoadContext: async (_req, ctx) => ctx,
 });
 `
 );
@@ -142,5 +179,6 @@ function netlifyPlugin() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createRequestHandler
+  createRequestHandler,
+  netlifyRouterContext
 });

package/dist/index.mjs

@@ -1,5 +1,40 @@
 // src/server.ts
-import { createRequestHandler as createReactRouterRequestHandler } from "react-router";
+import {
+  createContext,
+  RouterContextProvider,
+  createRequestHandler as createReactRouterRequestHandler
+} from "react-router";
+var netlifyRouterContext = (
+  // We must use a singleton because Remix contexts rely on referential equality.
+  // We can't hook into the request lifecycle in dev mode, so we use a Proxy to always read from the
+  // current `Netlify.context` value, which is always contextual to the in-flight request.
+  createContext(
+    new Proxy(
+      // Can't reference `Netlify.context` here because it isn't set outside of a request lifecycle
+      {},
+      {
+        get(_target, prop, receiver) {
+          return Reflect.get(Netlify.context ?? {}, prop, receiver);
+        },
+        set(_target, prop, value, receiver) {
+          return Reflect.set(Netlify.context ?? {}, prop, value, receiver);
+        },
+        has(_target, prop) {
+          return Reflect.has(Netlify.context ?? {}, prop);
+        },
+        deleteProperty(_target, prop) {
+          return Reflect.deleteProperty(Netlify.context ?? {}, prop);
+        },
+        ownKeys(_target) {
+          return Reflect.ownKeys(Netlify.context ?? {});
+        },
+        getOwnPropertyDescriptor(_target, prop) {
+          return Reflect.getOwnPropertyDescriptor(Netlify.context ?? {}, prop);
+        }
+      }
+    )
+  )
+);
 function createRequestHandler({
   build,
   mode,
@@ -10,8 +45,14 @@ function createRequestHandler({
     const start = Date.now();
     console.log(`[${request.method}] ${request.url}`);
     try {
-      const mergedLoadContext = await getLoadContext?.(request, netlifyContext) || netlifyContext;
-      const response = await reactRouterHandler(request, mergedLoadContext);
+      const getDefaultReactRouterContext = () => {
+        const ctx = new RouterContextProvider();
+        ctx.set(netlifyRouterContext, netlifyContext);
+        Object.assign(ctx, netlifyContext);
+        return ctx;
+      };
+      const reactRouterContext = await getLoadContext?.(request, netlifyContext) ?? getDefaultReactRouterContext();
+      const response = await reactRouterHandler(request, reactRouterContext);
       response.headers.set("x-nf-runtime", "Node");
       console.log(`[${response.status}] ${request.url} (${Date.now() - start}ms)`);
       return response;
@@ -29,7 +70,7 @@ import { sep as posixSep } from "node:path/posix";
 
 // package.json
 var name = "@netlify/vite-plugin-react-router";
-var version = "1.0.1";
+var version = "2.0.1";
 
 // src/plugin.ts
 var NETLIFY_FUNCTIONS_DIR = ".netlify/v1/functions";
@@ -45,7 +86,6 @@ import { createRequestHandler } from "@netlify/vite-plugin-react-router";
 import * as build from "virtual:react-router/server-build";
 export default createRequestHandler({
   build,
-  getLoadContext: async (_req, ctx) => ctx,
 });
 `
 );
@@ -115,5 +155,6 @@ function netlifyPlugin() {
 }
 export {
   createRequestHandler,
-  netlifyPlugin as default
+  netlifyPlugin as default,
+  netlifyRouterContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netlify/vite-plugin-react-router",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "description": "React Router 7+ Vite plugin for Netlify",
   "type": "commonjs",
   "main": "./dist/index.js",
@@ -40,20 +40,20 @@
   },
   "homepage": "https://github.com/netlify/remix-compute#readme",
   "dependencies": {
-    "@react-router/node": "^7.0.1",
-    "isbot": "^5.0.0",
-    "react-router": "^7.0.1"
+    "isbot": "^5.0.0"
   },
   "devDependencies": {
-    "@netlify/functions": "^3.0.0",
+    "@netlify/functions": "^3.1.9",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router": "^7.9.4",
     "tsup": "^8.0.2",
     "vite": "^6.2.5"
   },
   "peerDependencies": {
+    "react-router": ">=7.9.0",
     "vite": ">=5.0.0"
   },
   "engines": {