React Router v7 library mode with createBrowserRouter doesn't re-render on file changes in Vite HMR

[alanko0511]

I'm using React Router as a...

library

Reproduction

https://stackblitz.com/edit/vitejs-vite-ry7qt74n?file=src%2Froutes%2FIndexPage.tsx

Change the div text in the src/routes/IndexPage.tsx file, the page doesn't re-render. However, if I downgrade the React Router package version to 7.1.3, it will re-render as expected.

I saw that the Vite HMR WebSocket receives the file changes and downloads the file correctly when I test it locally, so I believe Vite is working as expected.

System Info

System:
    OS: macOS 13.0
    CPU: (12) arm64 Apple M2 Pro
    Memory: 74.41 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 23.2.0 - /opt/homebrew/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.9.0 - /opt/homebrew/bin/npm
    pnpm: 9.4.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 133.0.6943.142
    Safari: 16.1
  npmPackages:
    react-router: ^7.2.0 => 7.2.0 
    vite: ^6.2.0 => 6.2.0

Used Package Manager

pnpm

Expected Behavior

The page should be re-rendered when I change an element in the demo's src/routes/IndexPage.tsx file.

Actual Behavior

The changes I made don't cause it to re-render.

[markdalgleish]

Thanks for narrowing down the version that caused the issue. Looks like this issue was introduced in this PR: #12800

Seems like it's because the app is re-rendering with a new router instance during the HMR flow, but the matches in RouterProvider's state contains stale React elements from the initial render. Prior to the PR above, the matches were being computed during render with the latest router instance.

@brophdawg11 Do you have any thoughts on how best to support HMR here?

[rothsandro]

We have the same problem but in a completely different use case. In our tests with Vitest + Testing Library we render our component that we want to test and specify a wrapper component that creates a memory router and renders the router provider. Then we call rerender(...) from testing-library to re-render our component with different props. This will create a new memory router (which is necessary because there's a new element to render). It works fine in v7.1.3 but after updating react router it's not re-rendering anymore and our tests fail.

const TestingRoutingProvider = ({ children }) => {
  const router = createMemoryRouter([
      {
        index: true,
        element: children,
      },
    ]),
  );

  return <RouterProvider router={router} />;
};

// In our test
const { rerender } = render(
  <SomeComponent value="foo" />,
  { wrapper: TestingRoutingProvider },
);

rerender(<SomeComponent value="bar" />);

[zayprom]

@alanko0511 @rothsandro Hello, I experienced same issue after migration from remix to react-router 7. I use file naming convention and awaiting "flatRoutes" helped me to solve HMR issues. Here is the code from docs:

import {
  type RouteConfig,
  route,
} from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";

export default [
  route("/", "./home.tsx"),

  ...(await flatRoutes()),
] satisfies RouteConfig;

[cschwebk]

My application is running into the exact same issue that @rothsandro outlined.