Node.js platform abstractions for React Router
React Router is a multi-strategy router for React bridging the gap from React 18 to React 19. You can use it maximally as a React framework or minimally as a library with your own architecture.
remix-run
react-router@react-router/dev@react-router/node@react-router/cloudflare@react-router/serve@react-router/fs-routes@react-router/nodeRemove single fetch future flag. (#11522)
For Remix consumers migrating to React Router, the crypto global from the Web Crypto API is now required when using cookie and session APIs. This means that the following APIs are provided from react-router rather than platform-specific packages: (#11837)
createCookiecreateCookieSessionStoragecreateMemorySessionStoragecreateSessionStorageFor consumers running older versions of Node, the installGlobals function from @remix-run/node has been updated to define globalThis.crypto, using Node's require('node:crypto').webcrypto implementation.
Since platform-specific packages no longer need to implement this API, the following low-level APIs have been removed:
createCookieFactorycreateSessionStorageFactorycreateCookieSessionStorageFactorycreateMemorySessionStorageFactoryupdate minimum node version to 18 (#11690)
Add exports field to all packages (#11675)
node package no longer re-exports from react-router (#11702)
Drop support for Node 18, update minimum Node vestion to 20 (#12171)
installGlobals() as this should no longer be necessaryundici fetch polyfill behind a new installGlobals({ nativeFetch: true }) parameter (#9198)remix-serve will default to using undici for the fetch polyfill if future._unstable_singleFetch is enabled because the single fetch implementation relies on the undici polyfillinstallGlobals on their own to avoid runtime errors with Single Fetch@remix-run/server-runtime@2.9.0@remix-run/server-runtime@2.8.1@remix-run/server-runtime@2.8.0@remix-run/server-runtime@2.7.2@remix-run/server-runtime@2.7.1@remix-run/server-runtime@2.7.0@remix-run/server-runtime@2.6.0@remix-run/server-runtime@2.5.1@remix-run/server-runtime@2.5.0@remix-run/server-runtime@2.4.1DataFunctionArgs in favor of LoaderFunctionArgs/ActionFunctionArgs. This is aimed at keeping the types aligned across server/client loaders/actions now that clientLoader/clientActon functions have serverLoader/serverAction parameters which differentiate ClientLoaderFunctionArgs/ClientActionFunctionArgs. (#8173)@remix-run/web-fetch@4.4.2 (#8231)@remix-run/server-runtime@2.4.0@remix-run/server-runtime@2.3.1@remix-run/server-runtime@2.3.0@remix-run/server-runtime@2.2.0@remix-run/server-runtime@2.1.0crypto.randomBytes to crypto.webcrypto.getRandomValues for file session storage ID generation (#7203)Blob class instead of polyfill (#7217)@remix-run/server-runtime@2.0.1@remix-run/web-fetch@4.4.1Require Node >=18.0.0 (#6939)
Stop exporting the fetch API in favor of using the version in the global scope - which can be polyfilled via installGlobals (#7293)
Removed/adjusted types to prefer unknown over any and to align with underlying React Router types (#7319, #7354):
useMatches() return type from RouteMatch to UIMatchLoaderArgs/ActionArgs to LoaderFunctionArgs/ActionFunctionArgsAppData changed from any to unknownLocation["state"] (useLocation.state) changed from any to unknownUIMatch["data"] (useMatches()[i].data) changed from any to unknownUIMatch["handle"] (useMatches()[i].handle) changed from { [k: string]: any } to unknownFetcher["data"] (useFetcher().data) changed from any to unknownMetaMatch.handle (used in meta()) changed from any to unknownAppData/RouteHandle are no longer exported as they are just aliases for unknownThe route meta API now defaults to the new "V2 Meta" API (#6958)
For preparation of using Node's built in fetch implementation, installing the fetch globals is now a responsibility of the app server (#7009)
remix-serve, nothing is requiredIf you are using your own app server, you will need to install the globals yourself
`js filename=server.js
import { installGlobals } from "@remix-run/node";
installGlobals();
`
source-map-support is now a responsibility of the app server (#7009)
remix-serve, nothing is requiredIf you are using your own app server, you will need to install source-map-support yourself.
npm i source-map-supportjs filename=server.js
import sourceMapSupport from "source-map-support";
sourceMapSupport.install();
Removed support for "magic exports" from the remix package. This package can be removed from your package.json and you should update all imports to use the source @remix-run/* packages: (#6895)
- import type { ActionArgs } from "remix";
- import { json, useLoaderData } from "remix";
+ import type { ActionArgs } from "@remix-run/node";
+ import { json } from "@remix-run/node";
+ import { useLoaderData } from "@remix-run/react";atob/btoa polyfills in favor of built-in versions (#7206)ErrorResponse type for usage alongside isRouteErrorResponse (#7244)installGlobals (#7321)fetch() return is instanceof global Response by removing extended classes for NodeRequest and NodeResponse in favor of custom interface type cast (#7109)@remix-run/server-runtime@2.0.0@remix-run/web-fetch@4.4.0@remix-run/web-file@3.1.0@remix-run/web-stream@1.1.0@remix-run/server-runtime@1.19.3@remix-run/web-* packages (#7026)@remix-run/server-runtime@1.19.2@remix-run/server-runtime@1.19.1@remix-run/web-fetch@4.3.5. Submitted empty file inputs are now correctly parsed out as empty File instances instead of being surfaced as an empty string via request.formData() (#6816)@remix-run/server-runtime@1.19.0@remix-run/server-runtime@1.18.1@remix-run/server-runtime@1.18.0@remix-run/server-runtime@1.17.1Add HeadersArgs type to be consistent with loaders/actions/meta and allows for using a function declaration in addition to an arrow function expression (#6247)
import type { HeadersArgs } from "@remix-run/node"; // or cloudflare/deno
export function headers({ loaderHeaders }: HeadersArgs) {
return {
"x-my-custom-thing": loaderHeaders.get("x-my-custom-thing") || "fallback",
};
}Fix request.clone() instanceof Request returning false. (#6512)
Updated dependencies:
@remix-run/server-runtime@1.17.0@remix-run/server-runtime@1.16.1@remix-run/node/install side-effect to allow node --require @remix-run/node/install (#6132)logDevReady as replacement for platforms that can't initialize async I/O outside of the request response lifecycle. (#6204)@remix-run/server-runtime@1.16.0We have made a few changes to the API for route module meta functions when using the future.v2_meta flag. These changes are only breaking for users who have opted in. (#5746)
V2_HtmlMetaDescriptor has been renamed to V2_MetaDescriptormeta function's arguments have been simplifiedparentsData has been removed, as each route's loader data is available on the data property of its respective match object// before
export function meta({ parentsData }) {
return [{ title: parentsData["routes/some-route"].title }];
}
// after
export function meta({ matches }) {
return [
{
title: matches.find((match) => match.id === "routes/some-route")
.data.title,
},
];
}route property on route matches has been removed, as relevant match data is attached directly to the match object// before
export function meta({ matches }) {
const rootModule = matches.find((match) => match.route.id === "root");
}
// after
export function meta({ matches }) {
const rootModule = matches.find((match) => match.id === "root");
}<script type='application/ld+json' /> and meta-related <link /> tags to document head via the route meta function when using the v2_meta future flag@remix-run/server-runtime@1.15.0@remix-run/server-runtime@1.14.3@remix-run/server-runtime@1.14.2@remix-run/server-runtime@1.14.1@remix-run/server-runtime@1.14.0@remix-run/server-runtime@1.13.0@remix-run/server-runtime@1.12.0@remix-run/server-runtime@1.11.1Introduces the defer() API from @remix-run/router with support for server-rendering and HTTP streaming. This utility allows you to defer values returned from loader functions by returning promises instead of resolved values. This has been refered to as "sending a promise over the wire". (#4920)
Informational Resources:
Documentation Resources (better docs specific to Remix are in the works):
Updated dependencies:
@remix-run/server-runtime@1.11.0@remix-run/server-runtime@1.10.1V2_HtmlMetaDescriptor and V2_MetaFunction types from runtime packages (#4943)@remix-run/server-runtime@1.10.0@remix-run/server-runtime@1.9.0@remix-run/server-runtime@1.8.2@remix-run/server-runtime@1.8.1remix package is deprecated, and all (#3284)
exported modules will be removed in the next major release. For more details,
see the release notes for 1.4.0
where these changes were first announced.@remix-run/web-fetch. This addresses two bugs: (#4644)"credentials" values (Remix does nothing with these at the moment, but they pass through for the consumer of the request to access if needed)@remix-run/server-runtime@1.8.0@remix-run/server-runtime@1.7.6@remix-run/server-runtime@1.7.5@remix-run/server-runtime@1.7.4@remix-run/server-runtime@1.7.3@remix-run/web-fetch@4.3.1compression that rely on chunk flushing (#4235)@remix-run/server-runtime@1.7.2@remix-run/server-runtime@1.7.1SerializeFrom. This is used to infer the (#4013)
JSON-serialized return type of loaders and actions.fileStorage sessions to prevent deleting entire session directories@remix-run/server-runtime@1.7.0@remix-run/server-runtime@1.6.8@remix-run/server-runtime@1.6.7@remix-run/server-runtime@1.6.6We enhanced the type signatures of loader/action and
useLoaderData/useActionData to make it possible to infer the data type
from return type of its related server function.
To enable this feature, you will need to use the LoaderArgs type from
@remix-run/node instead of typing the function directly:
- import type { LoaderFunction } from "@remix-run/node";
+ import type { LoaderArgs } from "@remix-run/node";
- export const loader: LoaderFunction = async (args) => {
- return json<LoaderData>(data);
- }
+ export async function loader(args: LoaderArgs) {
+ return json(data);
+ }Then you can infer the loader data by using typeof loader as the type
variable in useLoaderData:
- let data = useLoaderData() as LoaderData;
+ let data = useLoaderData<typeof loader>();The API above is exactly the same for your route action and useActionData
via the ActionArgs type.
With this change you no longer need to manually define a LoaderData type
(huge time and typo saver!), and we serialize all values so that
useLoaderData can't return types that are impossible over the network, such
as Date objects or functions.
Updated dependencies
@remix-run/server-runtime