CODEWITHSUNDEEP
javascriptreactjsnpmmaterial-ui
Daniel Janowski
Daniel Janowski

Reputation: 151

Material UI React - Module not found: Can't resolve '@material-ui/pickers'

I got the following error:

Material UI React - Module not found: Can't resolve '@material-ui/pickers' in React.

I had the same message about '@date-io/date-fns' but managed to resolve it by updating to the newest version: npm i --save date-fns@next @date-io/date-fns

I suspect that it may need a similar solution.

The code is taken from the example on Material-UI website.

Thanks! Daniel

[import 'date-fns';
import React from 'react';
import Grid from '@material-ui/core/Grid';
import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider, KeyboardTimePicker, KeyboardDatePicker } from '@material-ui/pickers';

function MaterialUITest() {
  // The first commit of Material-UI
  const \[selectedDate, setSelectedDate\] = React.useState(new Date('2014-08-18T21:11:54'));

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justify="space-around">
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />
        <KeyboardDatePicker
          margin="normal"
          id="date-picker-dialog"
          label="Date picker dialog"
          format="MM/dd/yyyy"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />
        <KeyboardTimePicker
          margin="normal"
          id="time-picker"
          label="Time picker"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            'aria-label': 'change time',
          }}
        />
      </Grid>
    </MuiPickersUtilsProvider>
  );
}

export default MaterialUITest;

Upvotes: 15

Views: 39110

Answers (2)

Vy Do
Vy Do

Reputation: 52576

npm WARN deprecated @material-ui/[email protected]: This package no longer supported. It has been relaced by @mui/x-date-pickers

use

npm i @mui/x-date-pickers

Upvotes: 1

norbitrial
norbitrial

Reputation: 15166

You need to install that dependency as the following:

npm install @material-ui/pickers

After it can be resolved, this helped the problem on my end.

Upvotes: 19

Related Questions