How to navigate outside of React components in v7 without breaking HMR in Vite?

[Mikilll94]

I am using React Router v7 in Data Mode. In my React components I am using a fetch wrapper to make http calls. In this fetch wrapper I have a logic that if server returns 401 then I redirect to unauthorized page. Fetch wrapper is located in a seperate file .ts and in this file I am using these lines to navigate:

import { router } from "../router.ts";

router.navigate("/new-path")l

Unfortunately this breaks HMR in Vite because a circular dependency was created. The router object needs to access all components but components are using fetch wrapper which uses router object. How to avoid this circular dependency? Is there a better way to navigate outside React components in React Router v7?

Unfortunately the docs don't mention any way how to navigate outside React components -> https://reactrouter.com/start/declarative/navigating

[GabenGar]

Don't navigate outside of router components.
Your fetch wrapper instead should throw an error and said error must be handled at loader/error boundary.