30

I want to use Date picker from MUI but I get this error and I don't know what exactly is wrong. here is my code:

import TextField from "@mui/material/TextField";
import DatePicker from "@mui/lab/DatePicker";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";

const ExpenseForm = () => {
  return (
    <Box component="form" noValidate autoComplete="off">
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DatePicker
          label="Basic example"
          onChange={(newValue) => {}}
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
    </Box>
  );
};

export default ExpenseForm;

and my package.json:

"dependencies": {
    "@date-io/date-fns": "^2.13.1",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.3.1",
    "@mui/lab": "^5.0.0-alpha.68",
    "@mui/material": "^5.4.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },

but everytime I get these errors:

Compiled with problems:

ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 1:0-39

Module not found: Error: Can't resolve 'date-fns/addDays' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 2:0-45

Module not found: Error: Can't resolve 'date-fns/addSeconds' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 3:0-45

Module not found: Error: Can't resolve 'date-fns/addMinutes' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 4:0-41

Module not found: Error: Can't resolve 'date-fns/addHours' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 5:0-41

Module not found: Error: Can't resolve 'date-fns/addWeeks' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 6:0-43

Module not found: Error: Can't resolve 'date-fns/addMonths' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 7:0-41

Module not found: Error: Can't resolve 'date-fns/addYears' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 8:0-59

Module not found: Error: Can't resolve 'date-fns/differenceInYears' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 9:0-65

Module not found: Error: Can't resolve 'date-fns/differenceInQuarters' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 10:0-61

Module not found: Error: Can't resolve 'date-fns/differenceInMonths' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 11:0-59

Module not found: Error: Can't resolve 'date-fns/differenceInWeeks' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 12:0-57

Module not found: Error: Can't resolve 'date-fns/differenceInDays' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 13:0-59

Module not found: Error: Can't resolve 'date-fns/differenceInHours' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 14:0-63

Module not found: Error: Can't resolve 'date-fns/differenceInMinutes' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 15:0-63

Module not found: Error: Can't resolve 'date-fns/differenceInSeconds' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 16:0-73

Module not found: Error: Can't resolve 'date-fns/differenceInMilliseconds' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 17:0-59

Module not found: Error: Can't resolve 'date-fns/eachDayOfInterval' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 18:0-41

Module not found: Error: Can't resolve 'date-fns/endOfDay' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 19:0-43

Module not found: Error: Can't resolve 'date-fns/endOfWeek' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 20:0-43

Module not found: Error: Can't resolve 'date-fns/endOfYear' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 21:0-37

Module not found: Error: Can't resolve 'date-fns/format' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 22:0-41

Module not found: Error: Can't resolve 'date-fns/getHours' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 23:0-45

Module not found: Error: Can't resolve 'date-fns/getSeconds' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 24:0-39

Module not found: Error: Can't resolve 'date-fns/getYear' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 25:0-39

Module not found: Error: Can't resolve 'date-fns/isAfter' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 26:0-41

Module not found: Error: Can't resolve 'date-fns/isBefore' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 27:0-39

Module not found: Error: Can't resolve 'date-fns/isEqual' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 28:0-43

Module not found: Error: Can't resolve 'date-fns/isSameDay' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 29:0-45

Module not found: Error: Can't resolve 'date-fns/isSameYear' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 30:0-47

Module not found: Error: Can't resolve 'date-fns/isSameMonth' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 31:0-45

Module not found: Error: Can't resolve 'date-fns/isSameHour' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 32:0-39

Module not found: Error: Can't resolve 'date-fns/isValid' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 33:0-42

Module not found: Error: Can't resolve 'date-fns/parse' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 34:0-41

Module not found: Error: Can't resolve 'date-fns/setHours' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 35:0-45

Module not found: Error: Can't resolve 'date-fns/setMinutes' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 36:0-41

Module not found: Error: Can't resolve 'date-fns/setMonth' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 37:0-37

Module not found: Error: Can't resolve 'date-fns/getDay' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 38:0-53

Module not found: Error: Can't resolve 'date-fns/getDaysInMonth' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 39:0-45

Module not found: Error: Can't resolve 'date-fns/setSeconds' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 40:0-39

Module not found: Error: Can't resolve 'date-fns/setYear' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 41:0-45

Module not found: Error: Can't resolve 'date-fns/startOfDay' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 42:0-49

Module not found: Error: Can't resolve 'date-fns/startOfMonth' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 43:0-45

Module not found: Error: Can't resolve 'date-fns/endOfMonth' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 44:0-47

Module not found: Error: Can't resolve 'date-fns/startOfWeek' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 45:0-47

Module not found: Error: Can't resolve 'date-fns/startOfYear' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 46:0-41

Module not found: Error: Can't resolve 'date-fns/parseISO' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 47:0-43

Module not found: Error: Can't resolve 'date-fns/formatISO' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 48:0-57

Module not found: Error: Can't resolve 'date-fns/isWithinInterval' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 49:0-65

Module not found: Error: Can't resolve 'date-fns/_lib/format/longFormatters' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'


ERROR in ./node_modules/@date-io/date-fns/build/index.esm.js 50:0-50

Module not found: Error: Can't resolve 'date-fns/locale/en-US' in 'C:\Users\Amir\Desktop\React\React-apps\expense-tracker\node_modules\@date-io\date-fns\build'

I searched the web but couldn't find something useful . also some StackOverflow similar posts that suggested to restart the server I tried but didn't actually solve my problem.

3

1 Answer 1

72

You need to install the date-fns package from NPM using npm install --save date-fns.

3
  • 17
    Thank you. I don't know why they didn't mention in MUI documentation that we need to install this. thank you it worked
    – amir_70
    Feb 8, 2022 at 17:23
  • Not a problem, glad it helped. Mar 21, 2022 at 11:10
  • It's working properly Apr 25, 2022 at 16:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.