🐛 fix @datadog/browser-rum-react/react-router-vX import (#3405)

* 🔧 remove the alias for react-router-dom v7

* ✅ do not use entry point files in tests

* 🚚 use a single entry file for both versions of react-router-dom

* remove remaining mentions of react-router-dom-7

Author: BenoitZugmeyer

packages/rum-react/package.json

@@ -38,8 +38,8 @@
     "@types/react-dom": "19.0.4",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-router-dom-6": "npm:react-router-dom@6.30.0",
-    "react-router-dom-7": "npm:react-router-dom@7.2.0"
+    "react-router-dom": "7.2.0",
+    "react-router-dom-6": "npm:react-router-dom@6.30.0"
   },
   "repository": {
     "type": "git",

packages/rum-react/react-router-v6/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "main": "../cjs/entries/reactRouterV6.js",
-  "module": "../esm/entries/reactRouterV6.js",
-  "types": "../cjs/entries/reactRouterV6.d.ts"
+  "main": "../cjs/entries/reactRouter.js",
+  "module": "../esm/entries/reactRouter.js",
+  "types": "../cjs/entries/reactRouter.d.ts"
 }

packages/rum-react/react-router-v7/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "main": "../cjs/entries/reactRouterV7.js",
-  "module": "../esm/entries/reactRouterV7.js",
-  "types": "../cjs/entries/reactRouterV7.d.ts"
+  "main": "../cjs/entries/reactRouter.js",
+  "module": "../esm/entries/reactRouter.js",
+  "types": "../cjs/entries/reactRouter.d.ts"
 }

packages/rum-react/src/domain/reactRouter/createRouter.spec.ts

@@ -1,11 +1,12 @@
+import { createMemoryRouter as createMemoryRouterV7 } from 'react-router-dom'
+import { createMemoryRouter as createMemoryRouterV6 } from 'react-router-dom-6'
 import { initializeReactPlugin } from '../../../test/initializeReactPlugin'
-import { createMemoryRouter as createMemoryRouterV6 } from '../../entries/reactRouterV6'
-import { createMemoryRouter as createMemoryRouterV7 } from '../../entries/reactRouterV7'
+import { wrapCreateRouter } from './createRouter'
 
 describe('createRouter', () => {
   const versions = [
-    { label: 'react-router v6', createMemoryRouter: createMemoryRouterV6 },
-    { label: 'react-router v7', createMemoryRouter: createMemoryRouterV7 },
+    { label: 'react-router v6', createMemoryRouter: wrapCreateRouter(createMemoryRouterV6) },
+    { label: 'react-router v7', createMemoryRouter: wrapCreateRouter(createMemoryRouterV7) },
   ]
 
   for (const { label, createMemoryRouter } of versions) {

packages/rum-react/src/domain/reactRouter/routesComponent.spec.tsx

@@ -1,26 +1,40 @@
 import React, { act } from 'react'
-import { MemoryRouter as MemoryRouterV6, Route as RouteV6, useNavigate as useNavigateV6 } from 'react-router-dom-6'
-import { MemoryRouter as MemoryRouterV7, Route as RouteV7, useNavigate as useNavigateV7 } from 'react-router-dom-7'
+import * as rrdom6 from 'react-router-dom-6'
+import * as rrdom7 from 'react-router-dom'
 import { ignoreConsoleLogs } from '../../../../core/test'
 import { initializeReactPlugin } from '../../../test/initializeReactPlugin'
 import { appendComponent } from '../../../test/appendComponent'
-import { Routes as RoutesV6 } from '../../entries/reactRouterV6'
-import { Routes as RoutesV7 } from '../../entries/reactRouterV7'
+import { createRoutesComponent } from './routesComponent'
 import { ignoreReactRouterDeprecationWarnings } from './reactRouter.specHelper'
+import { wrapUseRoutes } from './useRoutes'
 ;[
   {
     version: 'react-router-6',
-    MemoryRouter: MemoryRouterV6,
-    Route: RouteV6,
-    useNavigate: useNavigateV6,
-    Routes: RoutesV6,
+    MemoryRouter: rrdom6.MemoryRouter,
+    Route: rrdom6.Route,
+    useNavigate: rrdom6.useNavigate,
+    Routes: createRoutesComponent(
+      wrapUseRoutes({
+        useRoutes: rrdom6.useRoutes,
+        useLocation: rrdom6.useLocation,
+        matchRoutes: rrdom6.matchRoutes,
+      }),
+      rrdom6.createRoutesFromChildren
+    ),
   },
   {
     version: 'react-router-7',
-    MemoryRouter: MemoryRouterV7,
-    Route: RouteV7,
-    useNavigate: useNavigateV7,
-    Routes: RoutesV7,
+    MemoryRouter: rrdom7.MemoryRouter,
+    Route: rrdom7.Route,
+    useNavigate: rrdom7.useNavigate,
+    Routes: createRoutesComponent(
+      wrapUseRoutes({
+        useRoutes: rrdom7.useRoutes,
+        useLocation: rrdom7.useLocation,
+        matchRoutes: rrdom7.matchRoutes,
+      }),
+      rrdom7.createRoutesFromChildren
+    ),
   },
 ].forEach(({ version, MemoryRouter, Route, useNavigate, Routes }) => {
   describe(`Routes component (${version})`, () => {

packages/rum-react/src/domain/reactRouter/startReactRouterView.spec.ts

@@ -8,7 +8,7 @@ import {
   createMemoryRouter as createMemoryRouterV7,
   type RouteObject as RouteObjectV7,
   type RouteMatch as RouteMatchV7,
-} from 'react-router-dom-7'
+} from 'react-router-dom'
 import { registerCleanupTask } from '../../../../core/test'
 import { initializeReactPlugin } from '../../../test/initializeReactPlugin'
 import { startReactRouterView, computeViewName } from './startReactRouterView'

packages/rum-react/src/domain/reactRouter/useRoutes.spec.tsx

@@ -1,26 +1,33 @@
 import React, { act } from 'react'
-import { MemoryRouter as MemoryRouterV6, useNavigate as useNavigateV6 } from 'react-router-dom-6'
-import { MemoryRouter as MemoryRouterV7, useNavigate as useNavigateV7 } from 'react-router-dom-7'
+import * as rrdom6 from 'react-router-dom-6'
+import * as rrdom7 from 'react-router-dom'
 import { appendComponent } from '../../../test/appendComponent'
 import { initializeReactPlugin } from '../../../test/initializeReactPlugin'
-import { useRoutes as useRoutesV6 } from '../../entries/reactRouterV6'
-import { useRoutes as useRoutesV7 } from '../../entries/reactRouterV7'
 import { ignoreConsoleLogs } from '../../../../core/test'
 import type { AnyRouteObject } from './types'
 import { ignoreReactRouterDeprecationWarnings } from './reactRouter.specHelper'
+import { wrapUseRoutes } from './useRoutes'
 
 const versions = [
   {
     version: 'react-router-6',
-    MemoryRouter: MemoryRouterV6,
-    useNavigate: useNavigateV6,
-    useRoutes: useRoutesV6,
+    MemoryRouter: rrdom6.MemoryRouter,
+    useNavigate: rrdom6.useNavigate,
+    useRoutes: wrapUseRoutes({
+      useRoutes: rrdom6.useRoutes,
+      useLocation: rrdom6.useLocation,
+      matchRoutes: rrdom6.matchRoutes,
+    }),
   },
   {
     version: 'react-router-7',
-    MemoryRouter: MemoryRouterV7,
-    useNavigate: useNavigateV7,
-    useRoutes: useRoutesV7,
+    MemoryRouter: rrdom7.MemoryRouter,
+    useNavigate: rrdom7.useNavigate,
+    useRoutes: wrapUseRoutes({
+      useRoutes: rrdom7.useRoutes,
+      useLocation: rrdom7.useLocation,
+      matchRoutes: rrdom7.matchRoutes,
+    }),
   },
 ]
 

…s/rum-react/src/entries/reactRouterV6.ts …ges/rum-react/src/entries/reactRouter.tspackages/rum-react/src/entries/reactRouterV6.ts renamed to packages/rum-react/src/entries/reactRouter.ts packages/rum-react/src/entries/reactRouterV6.ts renamed to packages/rum-react/src/entries/reactRouter.ts

@@ -8,7 +8,7 @@ import {
   useLocation,
   matchRoutes,
   createRoutesFromChildren,
-} from 'react-router-dom-6'
+} from 'react-router-dom'
 import { wrapCreateRouter, createRoutesComponent, wrapUseRoutes } from '../domain/reactRouter'
 
 export const createBrowserRouter = wrapCreateRouter(originalCreateBrowserRouter)

packages/rum-react/src/entries/reactRouterV7.ts

@@ -1,4 +1,4 @@
-import { Link, Outlet, RouterProvider, useParams } from 'react-router-dom-7'
+import { Link, Outlet, RouterProvider, useParams } from 'react-router-dom'
 import React, { useEffect, useState } from 'react'
 import ReactDOM from 'react-dom/client'
 import { datadogRum } from '@datadog/browser-rum'