Module not found: Error: Can't resolve 'date-fns/addDays' in 'C:\Users\

Question

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.

Answer 1

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