[Bug]: Getting "A router only supports one blocker at a time" warning when running your navigation-blocking example

[simonbaas]

What version of React Router are you using?

6.22.3

Steps to Reproduce

1. Clone react-router repo and navigate into examples/navigation-blocking
2. Update react-router-dom to 6.22.3 (same issue on ^6.21.0 though)
3. Run npm install
4. Start dev server: npm run dev
5. On page go to http://localhost:3000/three (Three (Form with blocker)
6. In code editor, press save on app.tsx so vite HMR runs
7. Go back to web page and click on another link
8. Notice warning in console

Expected Behavior

Not getting the warning. Any blocker should be disposed/cleaned up correctly.

Actual Behavior

Getting warning "A router only supports one blocker at a time" in console.

I'm seeing this issue in real world case as well, even if useBlocker is only called once in the entire app. It the component which calls useBlocker is "mounted" (in lack of better term) and the router is re-created higher up it seems like the old blocker is not disposed/removed/cleanup correctly.

[elvince]

Hi,
I'm facing exactly this bug also.

If a new router is recreated while a useBlocker is "active/mounted", it is not reseted properly.

Thanks for your help in fixing this.

[JasonDyke]

I've been seeing this same issue for a while now, but after updating to react-router-dom v6.23.0 today I haven't seen it again.

Can anyone else confirm that this issue is fixed in 6.23.0?

[Jose4gg]

@JasonDyke it is still happening to me in 6.23.0

[simonbaas]

Same issue still exists on 6.23.0.

[kubmir]

Same issue for me on 6.23.0. In fact, it also really prevents navigation for me. The last version which worked for me was 6.13.0 - all versions since then breaks navigation after form submission for me.

[elvince]

Same issue still exists on 6.23.0.

[ptim]

Not sure if this is a valid solution, but I notice in the example:
https://github.com/remix-run/react-router/blob/main/examples/navigation-blocking/src/app.tsx#L42

if (import.meta.hot) {
  import.meta.hot.dispose(() => router.dispose());
}

...seems to resolve the warning for me