fix(react-router): remove cyclic dependency

.changeset/dull-walls-drive.md

@@ -0,0 +1,5 @@
+---
+"@react-router/dev": patch
+---
+
+Added react-router/dom to Vite optimizeDeps and resolve.dedupe arrays

.changeset/shiny-horses-pump.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Removed cyclic dependency on react-router

contributors.yml

@@ -217,6 +217,7 @@
 - petersendidit
 - promet99
 - pyitphyoaung
+- redabacha
 - refusado
 - rimian
 - robbtraister

packages/react-router-dev/vite/plugin.ts

@@ -831,6 +831,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => {
               // Pre-bundle router dependencies to avoid router duplicates.
               // Mismatching routers cause `Error: You must render this element inside a <Remix> element`.
               "react-router",
+              "react-router/dom",
               // Check to avoid "Failed to resolve dependency: react-router-dom, present in 'optimizeDeps.include'"
               ...(hasDependency("react-router-dom")
                 ? ["react-router-dom"]
@@ -849,6 +850,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => {
 
               // see description for `optimizeDeps.include`
               "react-router",
+              "react-router/dom",
               "react-router-dom",
             ],
           },

packages/react-router/__tests__/Route-test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Routes, Route } from "react-router";
+import { MemoryRouter, Route, Routes } from "../index";
 
 describe("A <Route>", () => {
   it("renders its `element` prop", () => {

packages/react-router/__tests__/Router-basename-test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Routes, Route } from "react-router";
+import { MemoryRouter, Route, Routes } from "../index";
 
 describe("<Router basename>", () => {
   let consoleWarn: jest.SpyInstance;

packages/react-router/__tests__/Router-test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, useLocation } from "react-router";
+import { MemoryRouter, useLocation } from "../index";
 
 describe("<Router>", () => {
   let consoleError: jest.SpyInstance;

packages/react-router/__tests__/Routes-location-test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Route, Routes, useParams } from "react-router";
+import { MemoryRouter, Route, Routes, useParams } from "../index";
 
 describe("<Routes> with a location", () => {
   function Home() {

packages/react-router/__tests__/Routes-test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Routes, Route } from "react-router";
+import { MemoryRouter, Route, Routes } from "../index";
 
 describe("<Routes>", () => {
   let consoleWarn: jest.SpyInstance;

packages/react-router/__tests__/absolute-path-matching-test.tsx

@@ -1,5 +1,4 @@
-import type { RouteObject } from "react-router";
-import { matchRoutes } from "react-router";
+import { matchRoutes, type RouteObject } from "../index";
 
 function pickPaths(routes: RouteObject[], pathname: string): string[] | null {
   let matches = matchRoutes(routes, pathname);

packages/react-router/__tests__/createRoutesFromChildren-test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Route, createRoutesFromChildren } from "react-router";
+import { Route, createRoutesFromChildren } from "../index";
 
 describe("creating routes from JSX", () => {
   it("creates a route config of nested JavaScript objects", () => {

packages/react-router/__tests__/data-memory-router-test.tsx

@@ -20,21 +20,19 @@ import {
   useActionData,
   useAsyncError,
   useAsyncValue,
+  useFetcher,
   useLoaderData,
   useLocation,
   useMatches,
+  useNavigate,
   useNavigation,
+  useRevalidator,
   useRouteError,
   useRouteLoaderData,
-} from "react-router";
-
-import {
-  useFetcher,
-  useNavigate,
-  useRevalidator,
   useSubmit,
   type ErrorResponse,
 } from "../index";
+
 import urlDataStrategy from "./router/utils/urlDataStrategy";
 import { createDeferred } from "./router/utils/utils";
 import MemoryNavigate from "./utils/MemoryNavigate";

packages/react-router/__tests__/data-router-no-dom-test.tsx

@@ -4,9 +4,9 @@
 
 import * as React from "react";
 import renderer from "react-test-renderer";
-import { useFetcher } from "../lib/dom/lib";
-import { RouterProvider } from "../lib/dom-export/dom-router-provider";
 import { createMemoryRouter } from "../lib/components";
+import { RouterProvider } from "../lib/dom-export/dom-router-provider";
+import { useFetcher } from "../lib/dom/lib";
 import { useLoaderData, useNavigate } from "../lib/hooks";
 
 describe("RouterProvider works when no DOM APIs are available", () => {

packages/react-router/__tests__/descendant-routes-params-test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Routes, Route, useParams } from "react-router";
+import { MemoryRouter, Route, Routes, useParams } from "../index";
 
 describe("Descendant <Routes>", () => {
   it("receive all params from ancestor <Routes>", () => {

packages/react-router/__tests__/descendant-routes-splat-matching-test.tsx

@@ -1,7 +1,13 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Outlet, Routes, Route, useParams } from "react-router";
-import type { InitialEntry } from "react-router";
+import {
+  MemoryRouter,
+  Outlet,
+  Route,
+  Routes,
+  useParams,
+  type InitialEntry,
+} from "../index";
 
 describe("Descendant <Routes> splat matching", () => {
   describe("when the parent route path ends with /*", () => {

packages/react-router/__tests__/descendant-routes-warning-test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Outlet, Routes, Route } from "react-router";
+import { MemoryRouter, Outlet, Route, Routes } from "../index";
 
 describe("Descendant <Routes>", () => {
   let consoleWarn: jest.SpyInstance<void, any>;

packages/react-router/__tests__/dom/data-browser-router-test.tsx

@@ -1,4 +1,3 @@
-import type { ErrorResponse, Fetcher, RouterState } from "react-router";
 import "@testing-library/jest-dom";
 import {
   act,
@@ -9,7 +8,6 @@ import {
 } from "@testing-library/react";
 import { JSDOM } from "jsdom";
 import * as React from "react";
-import type { RouteObject } from "../../index";
 import {
   Await,
   UNSAFE_DataRouterStateContext as DataRouterStateContext,
@@ -35,10 +33,14 @@ import {
   useRouteError,
   useSearchParams,
   useSubmit,
+  type ErrorResponse,
+  type Fetcher,
+  type RouteObject,
+  type RouterState,
 } from "../../index";
 
-import getHtml from "../utils/getHtml";
 import { createDeferred, tick } from "../router/utils/utils";
+import getHtml from "../utils/getHtml";
 
 testDomRouter("<DataBrowserRouter>", createBrowserRouter, (url) =>
   getWindowImpl(url, false)

packages/react-router/__tests__/dom/data-static-router-test.tsx

@@ -4,17 +4,17 @@
 
 import * as React from "react";
 import * as ReactDOMServer from "react-dom/server";
-import type { StaticHandlerContext } from "../../index";
 import {
   Form,
   Link,
   Outlet,
+  StaticRouterProvider,
+  createStaticHandler,
+  createStaticRouter,
   useLoaderData,
   useLocation,
   useMatches,
-  createStaticHandler,
-  createStaticRouter,
-  StaticRouterProvider,
+  type StaticHandlerContext,
 } from "../../index";
 
 beforeEach(() => {

packages/react-router/__tests__/dom/partial-hydration-test.tsx

@@ -1,8 +1,7 @@
 import "@testing-library/jest-dom";
 import { act, render, screen, waitFor } from "@testing-library/react";
 import * as React from "react";
-import type { LoaderFunction } from "react-router";
-import {} from "react-router";
+import { RouterProvider as ReactRouterDom_RouterProvider } from "../../dom-export";
 import {
   Outlet,
   RouterProvider as ReactRouter_RouterProvider,
@@ -11,11 +10,11 @@ import {
   createMemoryRouter,
   useLoaderData,
   useRouteError,
+  type LoaderFunction,
 } from "../../index";
-import { RouterProvider as ReactRouterDom_RouterProvider } from "../../dom-export";
 
-import getHtml from "../utils/getHtml";
 import { createDeferred, tick } from "../router/utils/utils";
+import getHtml from "../utils/getHtml";
 
 let didAssertMissingHydrateFallback = false;
 

packages/react-router/__tests__/dom/scroll-restoration-test.tsx

@@ -1,20 +1,21 @@
+import "@testing-library/jest-dom";
+import "@testing-library/jest-dom/extend-expect";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { JSDOM } from "jsdom";
 import * as React from "react";
-import { render, fireEvent, screen } from "@testing-library/react";
-import "@testing-library/jest-dom";
 
-import getHtml from "../utils/getHtml";
 import {
   Link,
   Outlet,
   RouterProvider,
   ScrollRestoration,
   createBrowserRouter,
+  createMemoryRouter,
+  redirect,
 } from "../../index";
-import type { FrameworkContextObject } from "../../lib/dom/ssr/entry";
-import { createMemoryRouter, redirect } from "react-router";
 import { FrameworkContext, Scripts } from "../../lib/dom/ssr/components";
-import "@testing-library/jest-dom/extend-expect";
+import type { FrameworkContextObject } from "../../lib/dom/ssr/entry";
+import getHtml from "../utils/getHtml";
 
 describe(`ScrollRestoration`, () => {
   it("restores the scroll position for a page when re-visited", () => {

packages/react-router/__tests__/dom/ssr/components-test.tsx

@@ -1,9 +1,10 @@
-import { createStaticHandler } from "react-router";
+import "@testing-library/jest-dom/extend-expect";
 import { act, fireEvent, render } from "@testing-library/react";
 import * as React from "react";
 
 import {
   createMemoryRouter,
+  createStaticHandler,
   Link,
   NavLink,
   Outlet,
@@ -13,7 +14,6 @@ import { HydratedRouter } from "../../../lib/dom-export/hydrated-router";
 import { FrameworkContext } from "../../../lib/dom/ssr/components";
 import invariant from "../../../lib/dom/ssr/invariant";
 import { ServerRouter } from "../../../lib/dom/ssr/server";
-import "@testing-library/jest-dom/extend-expect";
 
 const setIntentEvents = ["focus", "mouseEnter", "touchStart"] as const;
 type PrefetchEventHandlerProps = {

packages/react-router/__tests__/generatePath-test.tsx

@@ -1,4 +1,4 @@
-import { generatePath } from "react-router";
+import { generatePath } from "../index";
 
 describe("generatePath", () => {
   describe("with no params", () => {

packages/react-router/__tests__/gh-issue-8127-test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Routes, Route } from "../index";
+import { MemoryRouter, Route, Routes } from "../index";
 
 describe("GH Issue #8127", () => {
   it("works", () => {

packages/react-router/__tests__/gh-issue-8165-test.tsx

@@ -2,11 +2,11 @@ import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
 import {
   MemoryRouter,
-  Routes,
+  Navigate,
   Route,
-  useParams,
+  Routes,
   useNavigate,
-  Navigate,
+  useParams,
 } from "../index";
 
 describe("GH Issue #8165", () => {

packages/react-router/__tests__/greedy-matching-test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Routes, Route, Outlet } from "../index";
+import { MemoryRouter, Outlet, Route, Routes } from "../index";
 
 describe("greedy matching", () => {
   let routes = (

packages/react-router/__tests__/index-routes-test.tsx

@@ -1,4 +1,4 @@
-import { matchRoutes } from "react-router";
+import { matchRoutes } from "../index";
 
 describe("index route matching", () => {
   it("throws when the index route has children", () => {

packages/react-router/__tests__/layout-routes-test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Routes, Route, Outlet } from "react-router";
+import { MemoryRouter, Outlet, Route, Routes } from "../index";
 
 describe("A layout route", () => {
   it("does not match when none of its children do", () => {

packages/react-router/__tests__/matchPath-test.tsx

@@ -1,4 +1,4 @@
-import { matchPath } from "react-router";
+import { matchPath } from "../index";
 
 describe("matchPath", () => {
   it("matches the root / URL", () => {

packages/react-router/__tests__/matchRoutes-test.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
-import type { RouteObject } from "react-router";
-import { matchRoutes } from "react-router";
+import { matchRoutes, type RouteObject } from "../index";
 
 function pickPaths(
   routes: RouteObject[],

packages/react-router/__tests__/navigate-test.tsx

@@ -1,16 +1,16 @@
+import { render, screen, waitFor } from "@testing-library/react";
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
 import {
   MemoryRouter,
   Navigate,
   Outlet,
-  Routes,
   Route,
   RouterProvider,
+  Routes,
   createMemoryRouter,
   useLocation,
-} from "react-router";
-import { render, screen, waitFor } from "@testing-library/react";
+} from "../index";
 
 import getHtml from "../../react-router/__tests__/utils/getHtml";
 

packages/react-router/__tests__/params-decode-test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Routes, Route, useParams } from "react-router";
+import { MemoryRouter, Route, Routes, useParams } from "../index";
 
 describe("Decoding params", () => {
   it("works", () => {

packages/react-router/__tests__/path-matching-test.tsx

@@ -1,5 +1,4 @@
-import type { RouteObject } from "react-router";
-import { matchRoutes } from "react-router";
+import { matchRoutes, type RouteObject } from "../index";
 
 function pickPaths(routes: RouteObject[], pathname: string): string[] | null {
   let matches = matchRoutes(routes, pathname);

packages/react-router/__tests__/resolvePath-test.tsx

@@ -1,4 +1,4 @@
-import { resolvePath } from "react-router";
+import { resolvePath } from "../index";
 
 describe("resolvePath", () => {
   it('resolves absolute paths irrespective of the "from" pathname', () => {

packages/react-router/__tests__/route-depth-order-matching-test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Outlet, Routes, Route } from "react-router";
+import { MemoryRouter, Outlet, Route, Routes } from "../index";
 
 describe("nested routes with no path", () => {
   it("matches them depth-first", () => {