Cannot use react-admin-date-inputs and other material-ui controls

[donezombie]

What you were expecting:

DateTimePicker works normally!

What happened instead:
The app crashed when the picker is selected

Steps to reproduce:

Add react-admin-date-inputs's DateTimePicker into create or edit form

Related code:

       <ArrayInput source="schedule.sessionConfigs" label="Session">
          <SimpleFormIterator>
            <DateTimeInput label="Start Time" source="startTime" options={{ format: 'DD/MM/YYYY, HH:mm:ss', ampm: false, clearable: true }} />
          </SimpleFormIterator>
        </ArrayInput>

Other information:

Environment

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

The above error occurred in the <WithStyles(Typography)> component:
    in WithStyles(Typography) (created by CalendarHeader)
    in div (created by CalendarHeader)
    in div (created by CalendarHeader)
    in CalendarHeader (created by Context.Consumer)
    in WithUtils(CalendarHeader)
    in WithStyles(WithUtils(CalendarHeader)) (created by Calendar)
    in Calendar (created by Context.Consumer)
    in WithUtils(Calendar)
    in WithStyles(WithUtils(Calendar)) (created by DateTimePicker)
    in div (created by DateTimePickerView)
    in DateTimePickerView
    in WithStyles(DateTimePickerView) (created by DateTimePicker)
    in div (created by DateTimePicker)
    in DateTimePicker (created by Context.Consumer)
    in WithUtils(DateTimePicker)
    in WithStyles(WithUtils(DateTimePicker)) (created by BasePicker)
    in div (created by DialogContent)
    in DialogContent
    in WithStyles(DialogContent) (created by ModalDialog)
    in div (created by Paper)
    in Paper
    in WithStyles(Paper) (created by Dialog)
    in div (created by Dialog)
    in Transition (created by Fade)
    in Fade
    in WithTheme(Fade) (created by Dialog)
    in RootRef (created by Modal)
    in div (created by Modal)
    in Portal (created by Modal)
    in Modal
    in WithStyles(Modal) (created by Dialog)
    in Dialog
    in WithStyles(Dialog) (created by ModalDialog)
    in ModalDialog
    in WithStyles(ModalDialog) (created by ModalWrapper)
    in ModalWrapper (created by BasePicker)
    in BasePicker (created by Context.Consumer)
    in WithUtils(BasePicker) (created by DateTimePickerModal)
    in DateTimePickerModal
    in WithStyles(DateTimePickerModal) (created by ForwardRef)
    in ForwardRef (created by _makePicker)
    in MuiPickersUtilsProvider (created by _makePicker)
    in div (created by _makePicker)
    in _makePicker (created by ConnectedField)
    in ConnectedField (created by Connect(ConnectedField))
    in Connect(ConnectedField) (created by Field)
    in Field (created by FormFieldView)
    in FormFieldView (created by DefaultValue)
    in DefaultValue (created by Connect(DefaultValue))
    in Connect(DefaultValue) (created by WithFormField)
    in WithFormField (at create.jsx:87)
    in div (created by FormInput)
    in FormInput (created by WithStyles(FormInput))
    in WithStyles(FormInput) (created by SimpleFormIterator)
    in section (created by SimpleFormIterator)
    in li (created by SimpleFormIterator)
    in Transition (created by CSSTransition)
    in CSSTransition (created by SimpleFormIterator)
    in div (created by TransitionGroup)
    in TransitionGroup (created by SimpleFormIterator)
    in ul (created by SimpleFormIterator)
    in SimpleFormIterator (created by WithStyles(SimpleFormIterator))
    in WithStyles(SimpleFormIterator) (created by Context.Consumer)
    in translate(WithStyles(SimpleFormIterator)) (at create.jsx:86)
    in Unknown (created by ConnectedFieldArray)
    in ConnectedFieldArray (created by Connect(ConnectedFieldArray))
    in Connect(ConnectedFieldArray) (created by FieldArray)
    in FieldArray (created by ArrayInput)
    in div (created by FormControl)
    in FormControl (created by WithStyles(FormControl))
    in WithStyles(FormControl) (created by ArrayInput)
    in ArrayInput (created by DefaultValue)
    in DefaultValue (created by Connect(DefaultValue))
    in Connect(DefaultValue) (at create.jsx:85)
    in div (created by FormInput)
    in FormInput (created by WithStyles(FormInput))
    in WithStyles(FormInput) (created by FormTab)
    in span (created by FormTab)
    in FormTab (created by Context.Consumer)
    in translate(FormTab) (at create.jsx:72)
    in Route (created by TabbedForm)
    in div (created by CardContent)
    in CardContent (created by WithStyles(CardContent))
    in WithStyles(CardContent) (created by CardContentInner)
    in CardContentInner (created by WithStyles(CardContentInner))
    in WithStyles(CardContentInner) (created by TabbedForm)
    in form (created by TabbedForm)
    in TabbedForm (created by WithStyles(TabbedForm))
    in WithStyles(TabbedForm) (created by Form(WithStyles(TabbedForm)))
    in Form(WithStyles(TabbedForm)) (created by Connect(Form(WithStyles(TabbedForm))))
    in Connect(Form(WithStyles(TabbedForm))) (created by ReduxForm)
    in ReduxForm (created by Context.Consumer)
    in translate(ReduxForm) (created by Connect(translate(ReduxForm)))
    in Connect(translate(ReduxForm)) (created by Route)
    in Route (created by withRouter(Connect(translate(ReduxForm))))
    in withRouter(Connect(translate(ReduxForm))) (at create.jsx:43)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Card)
    in Card (created by WithStyles(Card))
    in WithStyles(Card) (created by CreateView)
    in div (created by CreateView)
    in CreateView (created by CreateController)
    in CreateController (created by Context.Consumer)
    in translate(CreateController) (created by Connect(translate(CreateController)))
    in Connect(translate(CreateController)) (created by Create)
    in Create (created by WithStyles(Create))
    in WithStyles(Create) (at create.jsx:42)
    in Unknown (created by WithPermissions)
    in WithPermissions (created by Connect(WithPermissions))
    in Connect(WithPermissions) (created by getContext(Connect(WithPermissions)))
    in getContext(Connect(WithPermissions)) (created by Route)
    in Route (created by Resource)
    in Switch (created by Resource)
    in Resource (created by Connect(Resource))
    in Connect(Resource) (at App.jsx:117)
    in Route (created by RoutesWithLayout)
    in Switch (created by RoutesWithLayout)
    in RoutesWithLayout (created by Route)
    in div (created by Layout)
    in main (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Route)
    in Route (created by withRouter(WithStyles(Layout)))
    in withRouter(WithStyles(Layout)) (created by Connect(withRouter(WithStyles(Layout))))
    in Connect(withRouter(WithStyles(Layout))) (created by LayoutWithTheme)
    in MuiThemeProvider (created by LayoutWithTheme)
    in LayoutWithTheme (created by Route)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by Connect(CoreAdminRouter))
    in Connect(CoreAdminRouter) (created by getContext(Connect(CoreAdminRouter)))
    in getContext(Connect(CoreAdminRouter)) (created by Route)
    in Route (created by CoreAdmin)
    in Switch (created by CoreAdmin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by CoreAdmin)
    in TranslationProviderView (created by Connect(TranslationProviderView))
    in Connect(TranslationProviderView) (created by CoreAdmin)
    in Provider (created by CoreAdmin)
    in CoreAdmin (created by withContext(CoreAdmin))
    in withContext(CoreAdmin) (at App.jsx:111)
    in App (at src/index.js:9)
    in MuiThemeProvider (at src/index.js:9)

React will try to recreate this component tree from scratch using the error boundary you provided, Layout.
function.console.(anonymous function) @ index.js:1446
logCapturedError @ react-dom.development.js:16764
logError @ react-dom.development.js:16800
callback @ react-dom.development.js:17848
callCallback @ react-dom.development.js:11743
commitUpdateEffects @ react-dom.development.js:11783
commitUpdateQueue @ react-dom.development.js:11773
commitLifeCycles @ react-dom.development.js:17030
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
interactiveUpdates$1 @ react-dom.development.js:20337
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5083
index.js:1446 Warning: Missing translation for key: "TypeError: Cannot read property '@global' of undefined"
function.console.(anonymous function) @ index.js:1446
printWarning @ warning.js:34
warning @ warning.js:58
warn @ index.js:28
push../node_modules/node-polyglot/index.js.Polyglot.t @ index.js:395
Error @ Error.js:106
mountIndeterminateComponent @ react-dom.development.js:15425
beginWork @ react-dom.development.js:15956
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
interactiveUpdates$1 @ react-dom.development.js:20337
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5083

[Kmaschta]

Sorry, but the module react-admin-date-inputs is not maintained by the core React Admin team.
I can suggest you to open an issue on the following repository which is related to this library: https://github.com/vascofg/react-admin-date-inputs/

Hint: react-admin-date-inputs was created when React Admin was at its version 2.1.
https://github.com/vascofg/react-admin-date-inputs/blob/master/package.json#L49

[Kmaschta]

I opened a new PR, let me know of I can do more.
vascofg/react-admin-date-inputs#20

[donezombie]

I opened a new PR, let me know of I can do more.
vascofg/react-admin-date-inputs#20

Hi, thank you for your support!!.

I also examined further and saw that the issues are not only with the react-admin-date-inputs but also with other libraries with component MaterialUI Typography in it.

For example

export default props => (
  <Create title="Create Class" {...props}>
    <SimpleForm redirect="show">
        <Typography>Something</Typography>
    </SimpleForm>
  </Create>
);

will produce the same errors as above

I also noticed that it often crashed when WithStyles() is called

The above error occurred in the <WithStyles(Typography)> component:
    in WithStyles(Typography) (at create2.jsx:48)
    in div (created by FormInput)
    in FormInput (created by WithStyles(FormInput))
...

and got this warning at the end of console log

Warning: Missing translation for key: "TypeError: Cannot read property '@global' of undefined"

The react, react-admin versions and browser are the same as above
The @material-ui/core version is 3.9.0

Please look into it. Thank you again.

[Kmaschta]

Please check your Material UI version. React admin only supports a specific versions of Material UI.
Protip: you can check the react admin demo package.json in order to get the supported dependencies versions.

Also, we do not take support on the issue tracking system because of the high work load it can be.
Please use Stack Overflow to get help about React Admin general questions.