TypeError: navigator.block using the warnWhenUnsavedChanges prop in Form

After upgrading to version 4 I have an issue with using the warnWhenUnsavedChanges prop in Form.

What you were expecting:

Able to use the warnWhenUnsavedChanges prop in the form component and get an alert when leaving a page that a has a form with data so no data is lost but instead saved before leaving the page.

What happened instead:

When trying to edit a record I get the Error “navigator.block is not a function”.

Steps to reproduce:

1- User the Form Component and add the warnWhenUnsavedChanges. 2- Add TextInput fields. 3- Add info in the fields. 4- Get the error.

Environment Mac

• React-admin version: 4.3.2
• Last version that did not exhibit the issue (if applicable): 3*
• React version: 18.2.0
• Browser: Chrome
• Stack trace (in case of a JS error):

Uncaught TypeError: navigator.block is not a function
    at index.js:121476:33
    at commitHookEffectListMount (index.js:159924:26)
    at commitPassiveMountOnFiber (index.js:161700:13)
    at commitPassiveMountEffects_complete (index.js:161665:9)
    at commitPassiveMountEffects_begin (index.js:161652:7)
    at commitPassiveMountEffects (index.js:161640:3)
    at flushPassiveEffectsImpl (index.js:163813:3)
    at flushPassiveEffects (index.js:163758:14)
    at commitRootImpl (index.js:163709:5)
    at commitRoot (index.js:163456:5)

var useWarnWhenUnsavedChanges = function (enable, formRootPathname, control) {
    // react-router v6 does not yet provide a way to block navigation
    // This is planned for a future release
    // See https://github.com/remix-run/react-router/issues/8139
    var navigator = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(react_router_dom__WEBPACK_IMPORTED_MODULE_1__.UNSAFE_NavigationContext).navigator;
    var location = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_1__.useLocation)();
    var translate = (0,_i18n__WEBPACK_IMPORTED_MODULE_2__.useTranslate)();
    var _a = (0,react_hook_form__WEBPACK_IMPORTED_MODULE_3__.useFormState)(control ? { control: control } : undefined), isSubmitSuccessful = _a.isSubmitSuccessful, isSubmitting = _a.isSubmitting, dirtyFields = _a.dirtyFields;
    var isDirty = Object.keys(dirtyFields).length > 0;
    var initialLocation = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(formRootPathname || location.pathname);
    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
        if (!enable || !isDirty)
            return;
        var unblock = navigator.block(function (tx) {
            var newLocationIsInsideForm = tx.location.pathname.startsWith(initialLocation.current);
            if (!isSubmitting &&
                (newLocationIsInsideForm ||
                    isSubmitSuccessful ||
                    window.confirm(translate('ra.message.unsaved_changes')))) {
                unblock();
                tx.retry();
            }
        });
        return unblock;
    },

[fzaninotto]

Quick fix in userland: set a resolution in your package.json to force react-router < 6.4.0:

"resolutions": {
   "react-router": "6.3.0"
}

[fzaninotto]

Note that this bug only appears if you use a custom Router.