Incompatible invocation of BlockerFunction

[jacquesg]

As part of 6a1dc67a20c14c3d5952f8252519ada413c82eb6 the following change has been introduced:

        if (
          (typeof when === "boolean" && when === true) ||
          // @ts-ignore Reload case -- No location present
          (typeof when === "function" && when())
        ) {

Calling when without any arguments is not compatible with

  export declare type BlockerFunction = (args: {
    currentLocation: Location;
    nextLocation: Location;
    historyAction: HistoryAction;
}) => boolean;

Currently, this manifests as the following on page reload for me:

formactionbuttonblock.tsx:60 Uncaught TypeError: Cannot destructure property 'nextLocation' of 'undefined' as it is undefined.
    at when (:3000/src/components/formactionbuttonblock.tsx:32:21)
    at :3000/node_modules/.vite/deps/react-router-prompt.js?v=d73664e4:644:35

[bilalkosker]

I solved the problem by adding in use-prompt.ts
const location = useLocation();
const action = useNavigationType();

then I updated use callback lines

(typeof when === "boolean" && when) || (typeof when === "function" && when({ currentLocation: location as Location<any>, nextLocation: blocker.location as Location<any>, historyAction: action }))
Then it works.

[CJHorlebein]

Hmmm I had a similar issue. It looks like this issue is mostly when you navigate outside of your app. This also doesn't look like an issue from this package since BlockerFunction is a dependency in react-router.

I made a issue in that repository here
remix-run/react-router#12231

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.