How to solve this error Can not find utils in context - reactjs

Question

I am working on Materialui, here I am trying to display date and time but it is showing one error that is
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.
Please tell me how to solve this error
This is App.js
import React, { Fragment, useState } from "react";
import { DateTimePicker } from "#material-ui/pickers";
function BasicDateTimePicker() {
const [selectedDate, handleDateChange] = useState(new Date());
return (
<Fragment>
<DateTimePicker
label="DateTimePicker"
inputVariant="outlined"
value={selectedDate}
onChange={handleDateChange}
/>
<DateTimePicker
autoOk
ampm={false}
disableFuture
value={selectedDate}
onChange={handleDateChange}
label="24h clock"
/>
<DateTimePicker
value={selectedDate}
disablePast
onChange={handleDateChange}
label="With Today Button"
showTodayButton
/>
</Fragment>
);
}
export default BasicDateTimePicker;

Answer 1

Try wrapping it (like in the example: https://material-ui.com/components/pickers/):
import React, { Fragment, useState } from "react";
import DateFnsUtils from '#date-io/date-fns';
import { DateTimePicker, MuiPickersUtilsProvider } from "#material-ui/pickers";
function BasicDateTimePicker() {
const [selectedDate, handleDateChange] = useState(new Date());
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DateTimePicker
label="DateTimePicker"
inputVariant="outlined"
value={selectedDate}
onChange={handleDateChange}
/>
<DateTimePicker
autoOk
ampm={false}
disableFuture
value={selectedDate}
onChange={handleDateChange}
label="24h clock"
/>
<DateTimePicker
value={selectedDate}
disablePast
onChange={handleDateChange}
label="With Today Button"
showTodayButton
/>
</MuiPickersUtilsProvider>
);
}
export default BasicDateTimePicker;

Answer 2

If you are using IntelliJ IDEA 2020.2.3, then the following could help.
In my case, it was one of those stupid mistakes you can spend an hour or two to hunt down. So I copied and pasted the example from the official docs. I copied the component <MuiThemeProvider/> and then used the autocorrection feature of IntelliJ i.e Alt+Ener. So far, so good, see the screen:
I chose the first line as it seems that IDE correctly suggested the autocorrection. It inserts the following import at the header of the file:
import MuiPickersUtilsProvider from "#material-ui/pickers/MuiPickersUtilsProvider";
And it turns out that it's an incorrect version of using import for MuiThemeProvider. The correct version is:
import {MuiPickersUtilsProvider} from "#material-ui/pickers";
Be careful about using the autocomplete feature. Most of the time, it's working as you expect but not always, unfortunately. In this particular case, it's just better to ensure that all imports from the official example are the same as in your code.

Answer 3

I tried to solve the problem quite long. I forgot to wrap the DatePicker component with <LocalizationProvider dateAdapter={AdapterDateFns}>.
import AdapterDateFns from '#mui/lab/AdapterDateFns';
import LocalizationProvider from '#mui/lab/LocalizationProvider';
import DatePicker from '#mui/lab/DatePicker';
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
disableFuture
label="Responsive"
openTo="year"
views={['year', 'month', 'day']}
value={dateValue}
onChange={(newValue) => {
setDateValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
The above solution worked for me

Answer 4

I encountered the same error in a Lerna monorepo scenario. I made sure to use the correct imports, as the above answers suggested, but the error was still occurring.
The error occurred because:
I was using yarn workspaces
import { MuiPickersUtilsProvider } from "#material-ui/pickers"; was in a package
import { DateTimePicker} from "#material-ui/pickers"; was in a 3rd party library
hoisting happened to put the library package in root/node_modules and the "#material-ui/pickers" in root/packages/app/node_modules
=> The context that I set via MuiPickersUtilsProvider and the one looked up by the library was not really the same, hence the error.
Luckily, the fix is simple, just mark "#material-ui/pickers" and the red party packages as 'nohoist' in root/package.json:
"workspaces": {
"packages": [
"packages/*"
],
"nohoist": [
"**/#material-ui/pickers**",
"**/the-3rd-part-library**"
]
},
Hopefully, this saves somebody the 10 hours I spent trying to fix this 😅

Answer 5

I was also using yarn workspaces where one of my packages in the workspace functioned as my component library to be used in my react app package. I simply had to make sure both these packages had the same date util version. In my case I am using #date-io/moment. Once I specified "#date-io/moment": "^1.3.13" in both packages this error was resolved.

Answer 6

Starting from 1900 when openTo is "year".
Version : #material-ui/pickers": "^3.3.10"
<DatePicker
disableFuture
openTo="year"
format="dd/MM/yyyy"
label="Date of birth"
views={["year", "month", "date"]}
value={selectedDate}
onChange={handleDateChange}
/>