MUI X Date Picker+ date-fns = TypeError: utils.getYearText is not a function

Question

I am using MUI X Date Picker V4 and date-fns in a new project. My page is pretty simple and I am using the following DateTimePicker component from Material UI:

            <DateTimePicker
              label="Date and time"
              inputVariant="outlined"
              value={searchDateTime}
              disablePast
              onChange={handleSearchDateTimeChange}
              showTodayButton
              fullWidth
              disabled={isScanning}
            />

Upon clicking the date picker, my app crashes with the following error:

TypeError: utils.getYearText is not a function

How can I fix this?

Versions from package.json

    "@date-io/date-fns": "^2.11.0",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/pickers": "^3.3.10",
    "date-fns": "^2.26.0",
    "next": "10.0.5",
    "react": "17.0.2",
    "react-dom": "17.0.2",

Answer 1

Downgrade @date-io/date-fns from 2.11.0 to 1.3.13.

From the installation guide of Material UI Pickers:

Important: For material-ui-pickers v3 use v1.x version of @date-io adapters.

Answer 2

MUI: The AdapterDateFns class was moved from @mui/lab to @mui/x-date-pickers

You should use import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'

More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.