form.restart is not a function - final-form dependency causing troubles

[rtrembecky]

What you were expecting:

SimpleForm and TabbedForm components usage to work and not to throw an error.

What happened instead:

I received

Unhandled Runtime Error
TypeError: form.restart is not a function

coming from node_modules/ra-core/esm/form/useInitializeFormWithRecord.js (20:0), not showing any UI.

Steps to reproduce:

I managed to track the problem to the final-form dependency, of which we had the 4.18.7 version, while react-admin requires ^4.18.5, so it should be fine. So the steps would be:

• use this in your package.json:

  "resolutions": {
    "react-admin/final-form": "4.18.7"
  }

• run yarn
• compile and run your app
• go to any Edit or Create part of your admin application where you use <SimpleForm> or <TabbedForm>

Related code:

Other information:

I fixed this by using a ^4.20.0 resolution on my side, but I'd suggest updating the dependency in react-admin.
A temporary fix if anybody encounters the same problem:

  "resolutions": {
    "react-admin/final-form": "^4.20.0"
  }

Environment

• React-admin version: tested on 3.11.2 and 3.11.4
• Last version that did not exhibit the issue (if applicable): we had no problems on 3.9.3
• React version: 17.0.1
• Browser: Chrome 88
• Stack trace (in case of a JS error):

stacktraces:

Uncaught TypeError: form.restart is not a function
    at eval (webpack-internal:///./node_modules/ra-core/esm/form/useInitializeFormWithRecord.js:26)
    at invokePassiveEffectCreate (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23482)
    at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:3994)
    at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4056)
    at flushPassiveEffectsImpl (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23569)
    at unstable_runWithPriority (webpack-internal:///./node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:646)
    at runWithPriority$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11276)
    at flushPassiveEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23442)
    at performSyncWorkOnRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22264)
    at eval (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11327)
    at unstable_runWithPriority (webpack-internal:///./node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:646)
    at runWithPriority$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11322)
    at flushSyncCallbackQueue (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11309)
    at discreteUpdates$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22415)
    at discreteUpdates (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:3756)
    at dispatchDiscreteEvent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:5889)

The above error occurred in the <FormView> component:
    at FormView (webpack-internal:///./node_modules/ra-core/esm/form/FormWithRedirect.js:120:21)
    at ReactFinalForm (webpack-internal:///./node_modules/react-final-form/dist/react-final-form.es.js:161:20)
    at FormWithRedirect (webpack-internal:///./node_modules/ra-core/esm/form/FormWithRedirect.js:72:20)
    at TabbedForm
    at div
    at Paper (webpack-internal:///./node_modules/@material-ui/core/esm/Paper/Paper.js:46:23)
    at WithStyles(ForwardRef(Paper)) (webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:31)
    at Card (webpack-internal:///./node_modules/@material-ui/core/esm/Card/Card.js:26:23)
    at WithStyles(ForwardRef(Card)) (webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:31)
    at div
    at div
    at EditView (webpack-internal:///./node_modules/ra-ui-materialui/esm/detail/EditView.js:49:25)
    at RecordContextProvider (webpack-internal:///./node_modules/ra-core/esm/controller/RecordContext.js:33:23)
    at SaveContextProvider (webpack-internal:///./node_modules/ra-core/esm/controller/details/SaveContext.js:15:23)
    at EditContextProvider (webpack-internal:///./node_modules/ra-core/esm/controller/details/EditContextProvider.js:36:23)
    at ResourceContextProvider (webpack-internal:///./node_modules/ra-core/esm/core/ResourceContextProvider.js:9:23)
    at Edit (webpack-internal:///./node_modules/ra-ui-materialui/esm/detail/Edit.js:70:81)
    at RegistrationRequestEdit
    at WithPermissions (webpack-internal:///./node_modules/ra-core/esm/auth/WithPermissions.js:69:25)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:464:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:670:29)
    at ResourceContextProvider (webpack-internal:///./node_modules/ra-core/esm/core/ResourceContextProvider.js:9:23)
    at ResourceRoutes (webpack-internal:///./node_modules/ra-core/esm/core/Resource.js:57:19)
    at Resource (webpack-internal:///./node_modules/ra-core/esm/core/Resource.js:85:17)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:464:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:670:29)
    at RoutesWithLayout (webpack-internal:///./node_modules/ra-core/esm/core/RoutesWithLayout.js:22:23)
    at div
    at main
    at div
    at div
    at LayoutWithoutTheme (webpack-internal:///./node_modules/ra-ui-materialui/esm/layout/Layout.js:122:28)
    at WithStyles(LayoutWithoutTheme) (webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:31)
    at withRouter(WithStyles(LayoutWithoutTheme)) (webpack-internal:///./node_modules/react-router/esm/react-router.js:725:37)
    at Connect(withRouter(WithStyles(LayoutWithoutTheme))) (webpack-internal:///./node_modules/react-redux/es/components/connectAdvanced.js:231:75)
    at ThemeProvider (webpack-internal:///./node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:42:24)
    at Layout (webpack-internal:///./node_modules/ra-ui-materialui/esm/layout/Layout.js:194:28)
    at Layout
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:464:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:670:29)
    at div
    at CoreAdminRouter (webpack-internal:///./node_modules/ra-core/esm/core/CoreAdminRouter.js:61:89)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:464:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:670:29)
    at CoreAdminUI (webpack-internal:///./node_modules/ra-core/esm/core/CoreAdminUI.js:28:17)
    at AdminUI
    at Router (webpack-internal:///./node_modules/react-router/esm/react-router.js:93:30)
    at ConnectedRouter (webpack-internal:///./node_modules/connected-react-router/esm/ConnectedRouter.js:54:7)
    at ConnectedRouterWithContext (webpack-internal:///./node_modules/connected-react-router/esm/ConnectedRouter.js:160:25)
    at Connect(ConnectedRouterWithContext) (webpack-internal:///./node_modules/react-redux/es/components/connectAdvanced.js:231:75)
    at TranslationProvider (webpack-internal:///./node_modules/ra-core/esm/i18n/TranslationProvider.js:33:30)
    at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:14:20)
    at CoreAdminContext (webpack-internal:///./node_modules/ra-core/esm/core/CoreAdminContext.js:21:27)
    at AdminContext
    at Admin (webpack-internal:///./node_modules/react-admin/esm/Admin.js:89:24)
    at ErrorStateProvider (webpack-internal:///./components/context/ErrorState.tsx:32:73)
    at App
    at LoadableComponent (webpack-internal:///./node_modules/next/dist/next-server/lib/loadable.js:187:37)
    at App
    at CurrencyProvider (webpack-internal:///./components/context/Currency.tsx:36:23)
    at MyApp (webpack-internal:///./pages/_app.tsx:103:24)
    at withI18nextSSR(MyApp) (webpack-internal:///./node_modules/react-i18next/dist/es/withSSR.js:26:35)
    at NextStaticProvider (webpack-internal:///./node_modules/next-i18next/dist/commonjs/components/NextStaticProvider.js:32:37)
    at withI18nextTranslation(NextStaticProvider) (webpack-internal:///./node_modules/react-i18next/dist/es/withTranslation.js:28:31)
    at I18nextProvider (webpack-internal:///./node_modules/react-i18next/dist/es/I18nextProvider.js:9:19)
    at AppWithTranslation (webpack-internal:///./node_modules/next-i18next/dist/commonjs/hocs/app-with-translation.js:110:39)
    at withRouter(AppWithTranslation) (webpack-internal:///./node_modules/next/dist/client/with-router.js:15:37)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:150:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:639:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:764:24)

React will try to recreate this component tree from scratch using the error boundary you provided, LayoutWithoutTheme.

[djhi]

Thanks for the report.

[fzaninotto]

So this regression was introduced by #5776 (released in 3.11.3), which uses form.restart, that was introduced in final-form@4.20.

We didn't spot it because we need final-form 4.20 in development. Now we must force the upgrade on react-admin users :(.