reactjsmaterial-uidayjsmui-x-date-picker

MUI Date Pickers + Dayjs = TypeError: pt.isUTC is not a function


Getting this error when I entered a specific component

Here are the packages that I have installed

"@mui/lab": "^5.0.0-alpha.122",
"@mui/material": "^5.10.15",
"@mui/system": "^5.11.12",
"@mui/utils": "^5.10.15",
"@mui/x-data-grid": "^6.0.0",
"@mui/x-date-pickers": "^6.0.2",
TypeError: pt.isUTC is not a function
    at AdapterDayjs.getTimezone (AdapterDayjs.js:300:1)
    at AdapterDayjs.setTimezone (AdapterDayjs.js:312:1)
    at Object.setTimezone (valueManagers.js:29:1)
    at useValueWithTimezone.js:29:1
    at Object.useMemo (react-dom.production.min.js:172:1)
    at react_production_min.useMemo (react.production.min.js:23:24)
    at useValueWithTimezone (useValueWithTimezone.js:29:1)
    at usePickerValue (usePickerValue.js:184:1)
    at usePicker (usePicker.js:21:1)
    at useDesktopPicker (useDesktopPicker.js:60:1)
    at DesktopDateTimePicker.js:86:1
    at Ch (react-dom.production.min.js:157:1)
    at gi (react-dom.production.min.js:176:1)
    at ck (react-dom.production.min.js:271:1)
    at bk (react-dom.production.min.js:250:1)
    at ak (react-dom.production.min.js:250:1)
    at Tj (react-dom.production.min.js:250:1)
    at Lj (react-dom.production.min.js:243:1)
    at react-dom.production.min.js:123:1
    at at.unstable_runWithPriority (scheduler.production.min.js:17:1)
    at gg (react-dom.production.min.js:122:1)
    at jg (react-dom.production.min.js:123:1)
    at ig (react-dom.production.min.js:122:1)
    at Jg (react-dom.production.min.js:237:1)
    at Oh (react-dom.production.min.js:170:1)

Also have the LocalizationProvider setup with Dayjs adapter

import { LocalizationProvider } from '@mui/x-date-pickers'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

Any idea what the error can be?


Solution

  • Ok, I figured out how to solve it.

    I extend this from dayjs

    dayjs.extend(utc);
    dayjs.extend(advancedFormat);
    
    dayjs.extend(timezone);
    dayjs.tz.setDefault('America/New_York');
    

    But also I had to set some values in the code like this

    setStartDate(dayjs.utc());
    setEndDate(dayjs.utc());
    

    The error was caused by a specific MUI component (date picker)

    Hope it helps someone