Quiero usar el Selector de fecha de MUI pero recibo este error y no sé qué es exactamente lo que está mal. aquí está mi código:
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;y mi paquete.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" },pero cada vez que recibo estos errores:
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'Busqué en la web pero no pude encontrar algo útil. también algunas publicaciones similares de StackOverflow que sugirieron reiniciar el servidor que probé pero en realidad no resolvieron mi problema.
Debe instalar el paquete date date-fns fns desde NPM mediante npm install --save date-fns .