[Bug]: When using unstable_useBlocker, the console logs "A router only supports one blocker at a time"

[Bestwebdesign]

What version of React Router are you using?

6.8.1

Steps to Reproduce

1. Open https://stackblitz.com/edit/github-yrxhzt?file=package.json
   (basically it's the same example found here https://github.com/remix-run/react-router/tree/main/examples/navigation-blocking but using version 6.8.1)
2. Open console
3. Click on the link "Three (Form with blocker)"
4. Enter some text in the input
5. Click on another link like "Index", "One", "Two", ...
6. Console will log "A router only supports one blocker at a time"

Expected Behavior

No warnings in the console.

Actual Behavior

Console logs a warning "A router only supports one blocker at a time".

[timdorr]

Duplicate of #9978

[Bestwebdesign]

@timdorr The example I provided uses a single blocker, not multiple. It works fine with 6.8.0, the warning is logged only when using 6.8.1.

[popoleeMaster]

Same here, we use a single blocker on a page, and we are getting this warning in 6.8.1 (not appearing in 6.8.0) So I wonder if the lib change the way it detect it and there is an issue in our app, of the warning should not be triggered.

[timdorr]

Oh geez, I totally mis-read your issue. My apologies for that. This looks legit, so opening it back up...

[sjdemartini]

This seems potentially related to (or the same as) #10144. If I use the linked stackblitz here but remove StrictMode from main.tsx, I don't see the buggy "A router only supports one blocker at a time" logging when following the repro steps.

It looks like unstable_useBlocker does not properly handle StrictMode since it seemingly isn't cleaning up its blockers properly (as described here https://beta.reactjs.org/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development). This makes it difficult to ensure dev and prod consistency, since blocker/routing behavior won't match in certain situations, so ideally could be resolved. And presumably the issue in StrictMode could be indicative of a more fundamental bug as well.

[moshfiqrony]

This seems potentially related to (or the same as) #10144. If I use the linked stackblitz here but remove StrictMode from main.tsx, I don't see the buggy "A router only supports one blocker at a time" logging when following the repro steps.

It looks like unstable_useBlocker does not properly handle StrictMode since it seemingly isn't cleaning up its blockers properly (as described here https://beta.reactjs.org/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development). This makes it difficult to ensure dev and prod consistency, since blocker/routing behavior won't match in certain situations, so ideally could be resolved. And presumably the issue in StrictMode could be indicative of a more fundamental bug as well.

This was true for me

[adams-family]

+1

[dd-jonas]

Any updates on this?

[brophdawg11]

#10573 should fix unstable_useBlocker to play nice with StrictMode - this will be available in the next release (6.12.2 or 6.13.0)