material-ui-pickers: Doc Site Getting Started WRONG

The Getting Started Installation and Usage sections indicated to: import MuiPickersUtilsProvider from 'material-ui-pickers/MuiPickersUtilsProvider';

When it needs to be: import { MuiPickersUtilsProvider } from 'material-ui-pickers';

Otherwise, you get:

Error: Can not find utils in context. You either a) forgot to wrap your component tree in MuiPickersUtilsProvider; or b) mixed named and direct file imports. Recommendation: use named imports from the module index.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 21
  • Comments: 28 (11 by maintainers)

Most upvoted comments

I had the same issue after installing more time libraries. Read this post and tried some provided ways. Finally, this works for me.

import { DatePicker, MuiPickersUtilsProvider } from ‘material-ui-pickers’; import MomentUtils from ‘@date-io/moment’;

<MuiPickersUtilsProvider utils={MomentUtils}> <DatePicker // other props here /> </MuiPickersUtilsProvider> Also updated the version up to v2.2.4 Hope it can help someone.

@sebastianvoss For some reason the problem disappeared for me when I changed:

import { MuiPickersUtilsProvider } from 'material-ui-pickers';

to

import MuiPickersUtilsProvider from 'material-ui-pickers/MuiPickersUtilsProvider';

@danimbrogno-pml You should use only named exports or path imports, but not both together.

import { DatePicker, MuiPickersUtilsProvider } from 'material-ui-pickers';

or

import { DatePicker } from 'material-ui-pickers/DatePicker';
import MuiPickersUtilsProvider from 'material-ui-pickers/MuiPickersUtilsProvider';

Bad merge. Never mind. These utils will be provided as separate packages soon https://github.com/dmtrKovalenko/date-io

I recommend named exports because bundles have more optimizations.