Can't resolve '@material-ui/lab/AdapterDateFns'
Can't resolve '@material-ui/lab/DateTimePicker'
Can't resolve '@material-ui/lab/LocalizationProvider'
I am getting these errors even after having installed @material-ui/lab
This works for me very well
npm install @mui/lab
In Material UI v5 you need to install @mui/lab.My dependencies are here :
"dependencies": {
"@mui/lab": "^5.0.0-alpha.54",
"@mui/material": "^5.2.1",
}
For more information check this link
"@mui/lab": "^5.0.0-alpha.73", "@mui/material": "^5.4.4", "date-fns": "^2.28.0"
in my package.json
, still I get this error.
I have a working codesandbox here: https://codesandbox.io/s/youthful-wave-8xjy4
Make sure both @material-ui/core
and @material-ui/lab
are at version "5.0.0-alpha.24"
or above as I ran into the same import errors as you when following the guide at: https://next.material-ui.com/guides/pickers-migration/
// package.json
{
"dependencies": {
"@emotion/react": "11.1.5",
"@emotion/styled": "11.1.5",
"@material-ui/core": "5.0.0-alpha.24",
"@material-ui/lab": "5.0.0-alpha.24",
"date-fns": "2.17.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-scripts": "4.0.0"
},
}
"@mui/lab": "^5.0.0-alpha.73", "@mui/material": "^5.4.4", "date-fns": "^2.28.0"
in my package.json
, still I get this error.
Try running npm install @material-ui/core@next
and npm install @material-ui/lab@next
This should move you to version 5.
If the need arises, delete the node_modules
folder and run npm install
.
Now if you look into the lab
folder in node_modules/@material-ui, you will see the
Make sure that you installed a date management library. I think that @material-ui/lab/AdapterDateFns
will be supported with the date-fns library.
I read it at mui documentation for React Date Picker.
For date pickers in React MUI install the below two:
npm install @mui/x-date-pickers
// Install date library (if not already installed)
npm install dayjs
For rendering the date picker:
import * as React from 'react';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
export default function FirstComponent() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker />
</LocalizationProvider>
);
}
For more details, read this link.
THIS WORKED FOR ME!!!! I went into the node_modules to look for the specific files:
I have installed these :
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/lab": "^5.0.0-alpha.108",
"@mui/material": "^5.10.14",
npm install @material-ui/lab