useBlocker must be used within a data router.

[leemason]

Reproduction

i understand the requirements, howeveer this is a module federation setup that will be difficult to reproduce. im trying to understand the router context as clearly in this example its not being translated over module federation boundaries.

I am trying to use useBlocker, i am using a data router in the host via createBrowserRouter and its the only router instance in use. when i try and use useBlocker inside a component from an mfe i get the must be used with a data router error.

as you can see below its clearly a data router in use:

and the error boundary is firing with the error message its not in a data router.

System Info

System:
    OS: Windows 11 10.0.26200
    CPU: (8) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
    Memory: 15.87 GB / 31.95 GB
  Binaries:
    Node: 22.14.0 - C:\nvm4w\nodejs\node.EXE
    Yarn: 1.22.22 - C:\nvm4w\nodejs\yarn.CMD
    npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD
    pnpm: 10.21.0 - C:\nvm4w\nodejs\pnpm.CMD
  Browsers:
    Chrome: 141.0.7390.123
    Edge: Chromium (141.0.3537.99)
    Firefox: 131.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.26100.1882

Used Package Manager

yarn

Expected Behavior

using useBlocker via a mfe component should be possible inside a data router

Actual Behavior

error is thrown that it is not inside a data router.

[timdorr]

You have two different instances of the react-router library in your project. The reason you're seeing this is separate instances of a React Context that is used by the library to communicate between the various components. You need to figure out a way to ensure you're talking to the exact same instance of the module.

Another effect of this is that you're bundling in our library and possibly others multiple times within your app. If you can solve that, you will likely solve this issue as well.