Ошибка в KeyboardDatePicker Material-UI React
Хочу подключить KeyboardDatePicker от Material UI в Next.js приложении. Беру следующий код из примера:
import "date-fns"
import DateFnsUtils from "@date-io/date-fns"
import classNames from "classnames"
import PropTypes from "prop-types"
import { makeStyles } from "@material-ui/core/styles"
import {
MuiPickersUtilsProvider,
KeyboardDatePicker,
} from "@material-ui/pickers"
const useStyles = makeStyles({})
const CustomDatePicker = (props) => {
const classes = useStyles()
const dateOfBirth = new Date()
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
id="childDateOfBirth"
disableToolbar
variant="inline"
format="MM/dd/yyyy"
margin="normal"
value={dateOfBirth}
KeyboardButtonProps={{
"aria-label": "change date",
}}
/>
</MuiPickersUtilsProvider>
)
}
export default CustomDatePicker
Появляется такая ошибка:
RangeError: Format string contains an unescaped latin alphabet character `n`
at C:\Users\reactcoder\PROJECTS\_XXX\xxx\node_modules\date-fns\format\index.js:440:13
at Array.map (<anonymous>)
at Object.format [as default] (C:\Users\reactcoder\PROJECTS\_XXX\xxx\node_modules\date-fns\format\index.js:413:45)
at DateFnsUtils.formatByString (C:\Users\reactcoder\PROJECTS\_XXX\xxx\node_modules\@date-io\date-fns\build\index.js:291:42)
at DateFnsUtils.format (C:\Users\reactcoder\PROJECTS\_XXX\xxx\node_modules\@date-io\date-fns\build\index.js:288:21)
at getDisplayDate (C:\Users\reactcoder\PROJECTS\_XXX\xxx\node_modules\@material-ui\pickers\dist\material-ui-pickers.js:391:38)
at useKeyboardPickerState (C:\Users\reactcoder\PROJECTS\_XXX\xxx\node_modules\@material-ui\pickers\dist\material-ui-pickers.js:748:21)
at PickerWithState (C:\Users\reactcoder\PROJECTS\_XXX\xxx\node_modules\@material-ui\pickers\dist\material-ui-pickers.js:2729:21)
at processChild (C:\Users\reactcoder\PROJECTS\_XXX\xxx\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14)
at resolve (C:\Users\reactcoder\PROJECTS\_XXX\xxx\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
Никак не могу понять в чем причина. Библиотека @date-io/date-fns и фреймворк Next.js несовместимы?