Material-ui-pickers: Cannot read property 'date' of undefined

[mcdougal]

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | 1.0.0-rc.15 |
| @material-ui/core | 3.1.1 |
| React | 16.5.2 |
| Browser | Chrome |
| Peer library | [email protected] |

Steps to reproduce

1. Use MomentUtils
2. Try to render DatePicker

Expected behavior

It should render

Actual behavior

It throws an error:

TypeError: Cannot read property 'date' of undefined
    at getInitialDate (https://6nwylqj9kr.codesandbox.io/node_modules/material-ui-pickers/dist/material-ui-pickers.cjs.js:1914:20)
    at new BasePicker (https://6nwylqj9kr.codesandbox.io/node_modules/material-ui-pickers/dist/material-ui-pickers.cjs.js:1932:13)
    at constructClassInstance (https://6nwylqj9kr.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:11769:18)
    at updateClassComponent (https://6nwylqj9kr.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:13491:7)

It seems like the utils context is not getting passed into the BasePicker for some reason? https://github.com/dmtrKovalenko/material-ui-pickers/blob/develop/lib/src/_shared/BasePicker.jsx#L7. This was working for me on 1.0.0-rc.14 and stopped working when I upgraded to 1.0.0-rc.15 without making any other changes, so I think it was related to the update.

I've checked the changelog and it doesn't look like there should be any breaking changes besides the new @material-ui/core dependency, but it's totally possible I've missed something.

Live example

Here are two examples with the exact same code except for the version:
Working example with 1.0.0-rc.14: https://codesandbox.io/s/vj6n088935
Broken example with 1.0.0-rc.15: https://codesandbox.io/s/23o9339opy

[dmtrKovalenko]

I am sorry. I will publish fix as soon as possible
Now as workaround change import from
import { DatePicker } from 'material-ui-pickers'
to
import DatePicker from "material-ui-pickers/DatePicker";

[mcdougal]

No problem, thanks for awesome library! The workaround fixed it so I'll use that for now

[dmtrKovalenko]

Fixed in rc.17 https://codesandbox.io/s/llr6vly0w7

[TrySound]

@mcdougal See https://github.com/dmtrKovalenko/material-ui-pickers/pull/662#issuecomment-425745355. Never mix path imports and imports from modules.

@dmtrKovalenko You probably should reflect this in examples. Importing provider from path in readme confuses folks. Try to import only from entry point.

[TrySound]

FYI this lines are exception. To prevent bundle bloat they exist only in path import form.

import MomentUtils from 'material-ui-pickers/utils/moment-utils';
import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils';
import LuxonUtils from 'material-ui-pickers/utils/luxon-utils';

[Poukai]

The example is wrong https://material-ui-pickers.firebaseapp.com/demo/datepicker on this page for inline datepicker.

[dmtrKovalenko]

@Poukai Now it will works. We will update the docs and return back esm build

[Poukai]

@dmtrKovalenko can you share the snippet that will work for inlineDatePicker ? I tried all methods and i am still getting the error.

[dmtrKovalenko]

Update to rc.17
@Poukai

[Poukai]

and for code - @dmtrKovalenko

import { InlineDatePicker } from 'material-ui-pickers/DatePicker';
                      <InlineDatePicker
                          label="Basic example"
                          value={this.state.deadline}
                          onChange={this.handleDateChange}
                        />

I am still getting the error.

[dmtrKovalenko]

https://codesandbox.io/s/y0rlq27ovx

[tsvetann]

FYI: import DatePicker from "material-ui-pickers/DatePicker"; doesn't work for me.
"material-ui-pickers": "^1.0.0-rc.17",

[TrySound]

@tsvetann Try this

import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils';
import { MuiPickersUtilsProvider, DatePicker } from 'material-ui-pickers';

[a-m-dev]

https://codesandbox.io/s/y0rlq27ovx

this has error already on selecting date