ref(remix): Make @remix-run/router a dependency (v7) (#10779)

Backports #10479 to v7 branch

Original PR Description:
> Fixes: #10349
> Related: #5860
> Related: #10458
> 
> Removes dynamic loading of `react-router-dom` and makes
`@remix-run/router` a peer dependency.
> 
> We don't need to dynamically load `react-router-dom` as our TypeScript
version is now up-to-date.

Author: onurtemizkan

packages/remix/package.json

@@ -34,6 +34,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@remix-run/router": "1.x",
     "@sentry/cli": "^2.28.0",
     "@sentry/core": "7.102.0",
     "@sentry/node": "7.102.0",

packages/remix/src/utils/instrumentServer.ts

@@ -47,7 +47,6 @@ import type {
   EntryContext,
   FutureConfig,
   HandleDocumentRequestFunction,
-  ReactRouterDomPkg,
   RemixRequest,
   RequestHandler,
   ServerBuild,
@@ -384,10 +383,6 @@ export function createRoutes(manifest: ServerRouteManifest, parentId?: string):
 
 /**
  * Starts a new transaction for the given request to be used by different `RequestHandler` wrappers.
- *
- * @param request
- * @param routes
- * @param pkg
  */
 export function startRequestHandlerTransaction(
   hub: Hub,
@@ -435,19 +430,14 @@ export function startRequestHandlerTransaction(
 /**
  * Get transaction name from routes and url
  */
-export function getTransactionName(
-  routes: ServerRoute[],
-  url: URL,
-  pkg?: ReactRouterDomPkg,
-): [string, TransactionSource] {
-  const matches = matchServerRoutes(routes, url.pathname, pkg);
+export function getTransactionName(routes: ServerRoute[], url: URL): [string, TransactionSource] {
+  const matches = matchServerRoutes(routes, url.pathname);
   const match = matches && getRequestMatch(url, matches);
-  return match === null ? [url.pathname, 'url'] : [match.route.id, 'route'];
+  return match === null ? [url.pathname, 'url'] : [match.route.id || 'no-route-id', 'route'];
 }
 
 function wrapRequestHandler(origRequestHandler: RequestHandler, build: ServerBuild): RequestHandler {
   const routes = createRoutes(build.routes);
-  const pkg = loadModule<ReactRouterDomPkg>('react-router-dom');
 
   return async function (this: unknown, request: RemixRequest, loadContext?: AppLoadContext): Promise<Response> {
     // This means that the request handler of the adapter (ex: express) is already wrapped.
@@ -471,7 +461,7 @@ function wrapRequestHandler(origRequestHandler: RequestHandler, build: ServerBui
       }
 
       const url = new URL(request.url);
-      const [name, source] = getTransactionName(routes, url, pkg);
+      const [name, source] = getTransactionName(routes, url);
 
       scope.setSDKProcessingMetadata({
         request: {

packages/remix/src/utils/serverAdapters/express.ts

@@ -9,7 +9,6 @@ import {
 import { flush } from '@sentry/node';
 import type { Transaction } from '@sentry/types';
 import { extractRequestData, fill, isString, logger } from '@sentry/utils';
-import { cwd } from 'process';
 
 import { DEBUG_BUILD } from '../debug-build';
 import { createRoutes, getTransactionName, instrumentBuild, startRequestHandlerTransaction } from '../instrumentServer';
@@ -22,12 +21,9 @@ import type {
   ExpressRequestHandler,
   ExpressResponse,
   GetLoadContextFunction,
-  ReactRouterDomPkg,
   ServerBuild,
 } from '../vendor/types';
 
-let pkg: ReactRouterDomPkg;
-
 function wrapExpressRequestHandler(
   origRequestHandler: ExpressRequestHandler,
   build: ServerBuild,
@@ -40,18 +36,6 @@ function wrapExpressRequestHandler(
     res: ExpressResponse,
     next: ExpressNextFunction,
   ): Promise<void> {
-    if (!pkg) {
-      try {
-        pkg = await import('react-router-dom');
-      } catch (e) {
-        pkg = await import(`${cwd()}/node_modules/react-router-dom`);
-      } finally {
-        if (!pkg) {
-          DEBUG_BUILD && logger.error('Could not find `react-router-dom` package.');
-        }
-      }
-    }
-
     await runWithAsyncContext(async () => {
       // eslint-disable-next-line @typescript-eslint/unbound-method
       res.end = wrapEndMethod(res.end);
@@ -70,7 +54,7 @@ function wrapExpressRequestHandler(
 
       const url = new URL(request.url);
 
-      const [name, source] = getTransactionName(routes, url, pkg);
+      const [name, source] = getTransactionName(routes, url);
       const transaction = startRequestHandlerTransaction(hub, name, source, {
         headers: {
           'sentry-trace': (req.headers && isString(req.headers['sentry-trace']) && req.headers['sentry-trace']) || '',

packages/remix/src/utils/vendor/response.ts

@@ -6,7 +6,9 @@
 //
 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import type { DeferredData, ErrorResponse, ReactRouterDomPkg, RouteMatch, ServerRoute } from './types';
+import { matchRoutes } from '@remix-run/router';
+import type { AgnosticRouteMatch, AgnosticRouteObject } from '@remix-run/router';
+import type { DeferredData, ErrorResponse, ServerRoute } from './types';
 
 /**
  * Based on Remix Implementation
@@ -76,13 +78,9 @@ export const json: JsonFunction = (data, init = {}) => {
 export function matchServerRoutes(
   routes: ServerRoute[],
   pathname: string,
-  pkg?: ReactRouterDomPkg,
-): RouteMatch<ServerRoute>[] | null {
-  if (!pkg) {
-    return null;
-  }
+): AgnosticRouteMatch<string, AgnosticRouteObject>[] | null {
+  const matches = matchRoutes(routes, pathname);
 
-  const matches = pkg.matchRoutes(routes, pathname);
   if (!matches) {
     return null;
   }
@@ -91,6 +89,7 @@ export function matchServerRoutes(
     params: match.params,
     pathname: match.pathname,
     route: match.route,
+    pathnameBase: match.pathnameBase,
   }));
 }
 
@@ -115,10 +114,13 @@ export function isIndexRequestUrl(url: URL): boolean {
 /**
  * https://github.com/remix-run/remix/blob/97999d02493e8114c39d48b76944069d58526e8d/packages/remix-server-runtime/server.ts#L588-L596
  */
-export function getRequestMatch(url: URL, matches: RouteMatch<ServerRoute>[]): RouteMatch<ServerRoute> {
+export function getRequestMatch(
+  url: URL,
+  matches: AgnosticRouteMatch[],
+): AgnosticRouteMatch<string, AgnosticRouteObject> {
   const match = matches.slice(-1)[0];
 
-  if (!isIndexRequestUrl(url) && match.route.id.endsWith('/index')) {
+  if (!isIndexRequestUrl(url) && match.route.id?.endsWith('/index')) {
     return matches.slice(-2)[0];
   }
 

packages/remix/src/utils/vendor/types.ts

@@ -78,7 +78,7 @@ export type ExpressResponse = Express.Response;
 export type ExpressNextFunction = Express.NextFunction;
 
 export interface Route {
-  index?: boolean;
+  index: false | undefined;
   caseSensitive?: boolean;
   id: string;
   parentId?: string;
@@ -210,10 +210,6 @@ export interface DataFunction {
   (args: DataFunctionArgs): Promise<Response> | Response | Promise<AppData> | AppData;
 }
 
-export interface ReactRouterDomPkg {
-  matchRoutes: (routes: ServerRoute[], pathname: string) => RouteMatch<ServerRoute>[] | null;
-}
-
 // Taken from Remix Implementation
 // https://github.com/remix-run/remix/blob/97999d02493e8114c39d48b76944069d58526e8d/packages/remix-server-runtime/routeMatching.ts#L6-L10
 export interface RouteMatch<Route> {

yarn.lock

@@ -5239,6 +5239,11 @@
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.2.tgz#1c17eadb2fa77f80a796ad5ea9bf108e6993ef06"
   integrity sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==
 
+"@remix-run/[email protected]":
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.0.tgz#461a952c2872dd82c8b2e9b74c4dfaff569123e2"
+  integrity sha512-HOil5aFtme37dVQTB6M34G95kPM3MMuqSmIRVCC52eKV+Y/tGSqw9P3rWhlAx6A+mz+MoX+XxsGsNJbaI5qCgQ==
+
 "@remix-run/[email protected]":
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/@remix-run/server-runtime/-/server-runtime-1.5.1.tgz#5272b01e6dce109dc10bd68447ceae2d039315b2"