[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.

[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)

[brophdawg11]

This will be available in 6.14.0 - 6.13.0 was used to add a future flag for React.startTransition

[moshfiqrony]

Thanks for the update @brophdawg11

[github-actions]

🤖 Hello there,

We just published version 6.14.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 6.14.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[enoh-barbu]

After updating to latest version, I get the following error:

18react-dom.development.js:67 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. 

at Layout (http://localhost:3000/static/js/bundle.js:61513:63) 
at RenderedRoute (http://localhost:3000/static/js/bundle.js:308343:5) 
at RenderErrorBoundary (http://localhost:3000/static/js/bundle.js:308290:5) 
at DataRoutes (http://localhost:3000/static/js/bundle.js:308789:5) 
at Router (http://localhost:3000/static/js/bundle.js:308902:15) 
at RouterProvider (http://localhost:3000/static/js/bundle.js:308729:5) 
at AuthenticatedApp (http://localhost:3000/static/js/bundle.js:634:5) 
at AppRoot (http://localhost:3000/static/js/bundle.js:478:88) 
at AuthenticatorProvider (http://localhost:3000/static/js/bundle.js:342713:5) 
at ThemeProvider (http://localhost:3000/static/js/bundle.js:152273:5) 
at ThemeProvider (http://localhost:3000/static/js/bundle.js:152652:5) 
at ThemeProvider (http://localhost:3000/static/js/bundle.js:150659:14) 
at Provider (http://localhost:3000/static/js/bundle.js:304184:20)

No more details and the error it's getting fired every ~second

[bartelemi]

@enoh-barbu I reckon it is worth opening another issue with details, especially if you have a self-contained example where the error can be reproduced.

We have the same problem after upgrading to 6.14.0 and we had to downgrade back to 6.8.0.

[enoh-barbu]

@bartelemi so if you also have the same problem, should I still open a new issue?

[bartelemi]

I think so

[brophdawg11]

This is tracked in remix-run/remix#6704 but right now you should wrap your blocker function in a useCallback so you are not creating a new function identity on every render.

[kubmir]

This is still happening to me. What's worse 6.13.0 works well regarding blocking and displaying UI prompt. However, update to 6.14 / 6.15 (without any code change) causes this warning and blocker is probably not cleared which causes navigation not to work later.

It seems like router is not update / re-rendered and still takes the blocker which should be already removed.

[vasile-encord]

@kubmir same issue, getting confirm window twice, and after leaving the page I can see confirm error for every single page change, and I don't have useBlocker there.
If you know any way around to fix it please share.

[brophdawg11]

Please file a new issue with a minimal reproduction of the issue and we can take a look.

[Snouzy]

same issue with 6.22.0

downgrade to 6.8.0 works well.

I am with viteJS

[kubmir]

Hello @vasile-encord did you find any solution ? We had to update to 6.22.0 and it is still not working. It is broken for any version newer than 6.13.0 for me. It looks like redirect work for a second but than the original page is displayed and the warning is triggered.